Upload via script and image source

[jsobeslav]

Hi, I use this uploader and everything was prefectly fine untill I had to use a javascript cropper after upload.

I managed to get a Base-64 encoded (cropped) PNG image source that looks like this: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAACuYAAAgsCAYAAACgW...

Now my problem is: is there a way how to use this code and pass it to JS object I created earlier: var uploader = new ss.SimpleUpload(...) ?

I think I could create some workaround, but I want to re-use the code I have already written.

Thanks for response, John.

[ablipan]

@EyeOfThReindeer

1. Close the autoSubmit to false, i think you've already done this.
2. Convert the base-64 string to a file, use uploader.setData({file: base64ToFileObj} and then uploader.submit().

Tips: How to Convert Data URI to File. Why the uploader.setData({file: fileObj}) works

[jsobeslav]

Thanks for response. So I managed to get an image blob, I can't however submit the form manualy - even through autoSubmit is set to false. I don't see any reaction to onSubmit callback. My code is following:

if (result) {
     console.log("test");
     var blob = dataURItoBlob(result.toDataURL('image/jpeg', 0.7));
     uploader.setData({
          file: blob
     });
     console.log(blob);
     uploader.submit();
}

The console will write:

test
Blob { size=340650,  type="image/jpeg",  slice=slice()}

No errors (like uploader is undefined) in console. The size is variable, meaning that the cropping is successful and the image is always different from original. I also made submit button, that works perfectly:

$("#submit-form").click(function () {
      uploader.submit();
});

I keep digging. Can you see any obvious error?

[jsobeslav]

Quick update: uploader.getQueueSize() returns 0. Dump of uploader object does show my image: _opts > data > file = Blob { size=783410, type="image/jpeg", slice=slice()}

[jsobeslav]

Okey, now I realized how recent your pull request is. I'll update my files and let you know.

[jsobeslav]

Nope, updated files, still no success.

[ablipan]

Hmm. But it works for me.

new ss.SimpleUpload({
    // param ...
    onChange(filename, extension, uploadBtn, fileSize, file) {
        // compress the img
        // ...
        // set the compressed file into the data
        this.setData({
            // ...
            "file": compressedFileObj
        })
        this.submit()
    }
    // xxxx
})

You can check my demo and source code. Please ignore the Chinese.

[jsobeslav]

Still no luck.

The core problem I am facing now is that I'm unable to put my blob into process queue and therefore uploader.submit() does nothing. OnChange doesn't react to setData and setData doesn't update the queue aparently.

I'm looking for a way to force uploader to update queue after a file was set to data or, at least, to manualy change the queue.

[jsobeslav]

Yes! I managed to do it... My code is following:

if (result) {
        var blob = dataURItoBlob(result.toDataURL('image/jpeg', 0.99));
        var uid = 'axxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
            var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
            return v.toString(16);
        });
        uploader._queue.push({
            id: uid,
            file: blob,
            name: "uploadfile",
            ext: "jpg",
            button: uploader._btns[0],
            size: blob.size
        });
        uploader.submit();
    }

I admit, it's a bit harsh solution, but it works after all. By the way, the cropper is this one: https://github.com/fengyuanchen/cropper

Thank you for your guidance. You helped me a lot, really.

[ablipan]

You are welcome.😁