Multiple file with same name is not uploading in loopback

Question

I am uploading the files using the REST API url Loopback3. Once the form is submitted the values are inserted and the files is getting saved. Now if i upload the file with the same which already exits the file is not getting stored.How to rename the file followed by some random number and save.

HTML

<form  id="myForm" novalidate class="formval" >
    <div class="form-row">
       <div class="form-group col-md-6">
          <input type="text" class="form-control" id="firstname" name="firstname" placeholder="First Name" required>
       </div>
       <div class="form-group col-md-6">
          <input type="text" class="form-control" id="lastname" name="lastname" placeholder="Last Name" required>
       </div>
    </div>
    <div class="form-row">
       <div class="form-group col-md-12">
         <textarea class="form-control" id="message" name="message" placeholder="Message"></textarea>
       </div>
    </div>
    <div class="form-row">
       <div class="form-group col-md-8">
          <input type="file"  id="resume" class="form-control" name="resume" accept=".doc,.docx,.pdf" required />
       </div>
    </div>
    <input type="submit" class="btn btn-primary mt-10" id="item-submit" value="submit">
</form>

Script:

  var $firstname, $lastname, $message, $resume, $inserted_date, ins_date;


var apiUrl = 'http://localhost:3000/api/';

$(document).ready(function() {
   var random = Math.random( ); 
    $('#myForm').on('submit', handleForm);
     ins_date=new Date($.now()).toLocaleString();
    $firstname = $('#firstname');
    $lastname = $('#lastname');
    $message = $('#message');
    $resume = $('#resume');
    $inserted_date=ins_date;
});


function handleForm(e) {
    e.preventDefault();

    var career = {
      firstname:$firstname.val(),
      lastname:$lastname.val(),
      message:$message.val(),
      inserted_date:ins_date
    }
    console.log(career);
    $.post(apiUrl + 'careers', career).then(function(res) {
        career = res;
        var promises = [];
        if($resume.val() != '') {
            console.log('i need to process the resume upload');
            promises.push(sendFile($resume.get(0).files[0], apiUrl + 'attachments/resume/upload'));
        }
        Promise.all(promises).then(function(results) {
            console.log('back from all promises', results);
            if(promises.length >= 1) {
                results.forEach(function(resultOb) {
                    if(resultOb.result.files && resultOb.result.files.file[0].container) {
                     career[resultOb.result.files.file[0].container] = resultOb.result.files.file[0].name;
                    }
                });
                console.dir(career);
                var id = career.id;
                delete career.id;
                $.post(apiUrl + 'careers/'+id+'/replace', career).then(function() {
                });
            } else {
            }
        });

    });

}

function sendFile(file, url) {
    return new Promise(function(resolve, reject) {
        var xhr = new XMLHttpRequest();
        var fd = new FormData();
        xhr.open("POST", url, true);
        xhr.onreadystatechange = function() {
            if(xhr.readyState == 4 && xhr.status == 200) {
                resolve(JSON.parse(xhr.responseText));
            }
        };
        fd.append('file', file);
        xhr.send(fd);
        $(".alert-success").removeClass("d-none");
          $(".alert-success").fadeTo(2000, 500).slideUp(500, function(){
            $(".alert-success").slideUp(500);
         });
          $('#myForm')[0].reset();
    });
}

Answer 1

It looks like you are using the loopback-component-storage.

I would advise to simply use the nameConflict attribute when creating your datasource, like in the following example - since it looks like you already retrieve the filename that has been uploaded:

In your Loopback's server/server.js

var ds = loopback.createDataSource({
    connector: require('loopback-component-storage'),
    provider: 'filesystem',
    root: path.join(__dirname, 'attachments'),
    nameConflict: 'makeUnique' // simply add this line!
});

var container = ds.createModel('attachments');