0

Good evening, I would like to use the plugin jQuery File Upload Plugin but I have a problem. I'm using a base64 image, because the image passes through a trimming tool to cut the image. How can I upload and upload an image in base64 format via .fileupload () I need a jquery / php version

I can not find solutions, thanks in advance Sincerely

MARI Mathieu
  • 39
  • 1
  • 8
  • Possible duplicate of [Pass Blob through ajax to generate a file](https://stackoverflow.com/questions/19015555/pass-blob-through-ajax-to-generate-a-file) – ficuscr Jun 06 '18 at 21:31
  • This might be an easier one to follow: https://stackoverflow.com/questions/34779799/upload-base64-image-with-ajax – ficuscr Jun 06 '18 at 21:33
  • I use this plugin https://github.com/blueimp/jQuery-File-Upload/wiki You have an example to recover the blob with the function fileupload? I only find examples via input fields Thank you very much in any case for your express answer – MARI Mathieu Jun 06 '18 at 21:36
  • I can actually with my trimming tool recover the image in blob but I can not find the example to pass it in the fileupload – MARI Mathieu Jun 06 '18 at 21:36
  • Just google `jquery ajax post` or `jquery xhr`. Common question. Otherwise try plugin docs. Sorry, just noticing we are talking about some specific upload plugin. Seeing [this...](https://stackoverflow.com/questions/18210031/programmatic-file-upload-with-jquery-file-upload) – ficuscr Jun 06 '18 at 21:39

1 Answers1

0

From their documentation: https://github.com/blueimp/jQuery-File-Upload/wiki/API#programmatic-file-upload

$('#fileupload').fileupload('add', {files: filesList});

The second argument must be an object with an array (or array-like list) of File or Blob objects as files property.

So sounds like it is as simple as:

var blob = ... //you said in the comments you've got the blob...
var blob = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==';
$('#fileupload').fileupload('add', {files: [blob]})

Now, I've also come across some more complex code (source) that suggests something like this is also possible:

$('#fileupload').fileupload({
    autoUpload: true,
    add: function (event, data) {
      $.ajax({
        url: "/upload",
        type: 'POST',
        dataType: 'json',
        data: {doc: {title: data.files[0].name}},
        async: false,
        success: function(response) {
          ...
        }

      });

Seems pretty flexible.

ficuscr
  • 6,975
  • 2
  • 32
  • 52
  • What I do not understand is $ ('# fileupload') being given that it is a blob and name an object of the DOM html so I do not see how to adapt it. – MARI Mathieu Jun 06 '18 at 21:53
  • Sorry I'm new: D – MARI Mathieu Jun 06 '18 at 21:56
  • If I understand... you said you have a variable with a base64 string that is an image. Why are we talking about the DOM? This is trying to illustrate that you can pass that `blob` just as you would the file uploaded to a form's file input. – ficuscr Jun 06 '18 at 22:02
  • If we look at $ ('# fileupload'). Fileupload ('add', {files: [blob]}) we can see that the function fileupload is associated with an element of dom $ ('# fileupload'). I do not understand being given that goes through the blob so not an DOM object html. – MARI Mathieu Jun 06 '18 at 22:04
  • Seems to me that the plugin takes a form element. `$ ('# fileupload)` is the form. – ficuscr Jun 06 '18 at 22:14
  • No it's an input field Here is the demo example. It's a file type input http://blueimp.github.io/jQuery-File-Upload/basic.html – MARI Mathieu Jun 06 '18 at 22:17
  • In the data I can put my blob in your opinion? Here "data: {doc: {title: data.files[0].name}}," ? – MARI Mathieu Jun 06 '18 at 22:24