Upload from url

[kozlovvski]

Purpose / Goal

The purpose is to add a feature mentioned in #148.

As for now:

• I have added an icon for uploading image from URL
• I fixed css to adjust for the new icon
• I created urlUpload.js which opens jQuery dialog box when icon is clicked and handles parsing img URL to base64 on submit.

Right now the issue is that I can't add this image to the slider, because I can't call methods from images-slider.tag.html. I guess that has to do with some scoping issues. I need help with that.

Type

Please mention the type of PR

• Bug Fix
• Refactoring / Technology upgrade
• New Feature
• Documentation
• Other : | Please Specify |

Note : Please ensure that you've read contribution guidelines before raising this PR.

[amitguptagwl]

What methods do you need to call from images-slider.tag.html. All the files ending with tag.html can be considered as react component not the normal js or HTML files. They generally don't call any function outside. However, they may call the function of their parents and global functions too.

[kozlovvski]

I would like to call tag.thumbnails.push() at some point.

However, now I see that the image from URL needs to be saved at some point, and I don't know when it would be the best to do it.

Also, we must keep in mind that we can't choose where user will save the file and therefore we can't easily obtain filepath, which is needed later on by tag.thumbnails.push()

I can't come up with a user-friendly solution to this 😞

[amitguptagwl]

Have you checked how current file reading functionality is working? check function readImageFile. Can you please also share the screenshot of UI changes.

[kozlovvski]

@amitguptagwl sure!

UI with some loaded images:

Popup which opens after clicking new url icon:

As for how current file reading functionality is working - yeah, I've read readImageFile. It reads an image file and creates a imgData object with name string and src string with base64 image data. Then it pushes it into array.

So when obtaining an image from URL, I thought it would be nice to encode it into base64, give it some name like url-upload_${someNumber}.${imageExtension} and then push it to tag.thumbnails array. And from there everything should work fine