2

Currently I am capturing the image of the camera, this Base64 format,and I'm sending through ajax.

xhr({
  uri: 'http://localhost:1337/file/upload',
  method: 'post',
  body:'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAA...'
}

0 file(s) uploaded successfully!

Felipe
  • 78
  • 7
  • You need to elaborate your question a bit more. It's not entirely clear what you're trying to ask. See [How do I ask a good question](https://stackoverflow.com/help/how-to-ask). – Mr. Llama Aug 04 '15 at 21:46
  • Did you got any solution for this one? Actually I'm stuck in the same problem. – Indranil Mondal Feb 18 '16 at 19:20

1 Answers1

1

Here is a nice link that will guide you to do send an image from an Ajax Client to an ajax server.

http://www.nickdesteffen.com/blog/file-uploading-over-ajax-using-html5

You can read this sails documentation to receive files on a sails server :

http://sailsjs.org/documentation/reference/request-req/req-file

You can do as the following example :

Client side ( ajax ): 

var files = [];

$("input[type=file]").change(function(event) {
  $.each(event.target.files, function(index, file) {
    var reader = new FileReader();
    reader.onload = function(event) {  
      object = {};
      object.filename = file.name;
      object.data = event.target.result;
      files.push(object);
    };  
    reader.readAsDataURL(file);
  });
});

$("form").submit(function(form) {
  $.each(files, function(index, file) {
    $.ajax({url: "/ajax-upload",
          type: 'POST',
          data: {filename: file.filename, data: file.data}, // file.data is your base 64
          success: function(data, status, xhr) {}
    });      
  });
  files = [];
  form.preventDefault();
});

Server side ( sails ) : [let's say you have a model Picture that take an ID and a URL] [here is a sample of Picture controller, just to give you an idea]

module.exports = {
    uploadPicture: function(req, res) {

  req.file('picture').upload({
    // don't allow the total upload size to exceed ~10MB
    maxBytes: 10000000
  },
  function onDone(err, uploadedFiles) {


    if (err) {
      return res.negotiate(err);
    }
    // If no files were uploaded, respond with an error.
    if (uploadedFiles.length === 0){
      return res.badRequest('No file was uploaded');
    }



    // Save the "fd" and the url where the avatar for a user can be accessed
    Picture
      .update(777, { // give real ID
        // Generate a unique URL where the avatar can be downloaded.
        pictureURL: require('util').format('%s/user/pictures/%s', sails.getBaseUrl(), 777), // GIVE REAL ID
        // Grab the first file and use it's `fd` (file descriptor)
        pictureFD: uploadedFiles[0].fd
      })
      .exec(function (err){
        if (err) return res.negotiate(err);
        return res.ok();
      });
    });

  }
};

Hope this will help in your research. I also recommand you to use Postman to test your API first, then code your client.

Bertrand Barraud
  • 53
  • 4
  • So the Serverside Code is the same for Base64 upload as for Multipart file upload? – Suisse Aug 30 '16 at 09:20
  • If you mean by Multipart file upload to send chunks of a file, let's say because it's a too large file like a zip then you will have to make some changes on the server side. Right now with this code, the server expect the full file right a away. In your case, you will have to save it in an array or other variable, then re-assemble it. You will want also to check if you received the right amount of data, to be sure your file has not been corrupt. If the question was more : Can I send chunks of files in base64, the answer is yes. – Bertrand Barraud Aug 31 '16 at 13:42
  • The original Questioner asked for Base64 Upload for Sails. And you answered "req.file('picture').upload()" - I used that function for a Multipart fileupload ( in html a form with and a submit button). In your answer I don't see a reconverting function for Base64 String to JPG File. That's why I ask. thx – Suisse Aug 31 '16 at 17:31