0

So I am creating a program that scrapes data and images from a retailer, like amazon or walmart. In doing so, I grab the image srcs from there website that contains the products images.

However, I want to later uploads these photos to an input[type='file'], however they are obviously not files. What I was attempting to do was to convert these img srcs to dataURLs, then I would convert the dataURL to a blob, that would then be converted to file for upload.

My main problem is converting the blob to a file, and then uploading that file to the input.

Am i approaching this the right way, if so, could someone clarify what I am doing worng and lead me in a better direction.

If I am approaching this completely wrong, please let me know and offer a better solution. Thanks! enter image description here

enter image description here

Slava Rozhnev
  • 9,510
  • 6
  • 23
  • 39
Shane Marotta
  • 11
  • 5
  • You can't edit the value of an input file, for security reason it's just not possible without user interaction. Uploading the file to the input ? I don't get it, you want to send the images to a serve or trigger a download on client side ? – Fennec May 29 '21 at 20:51
  • Triggering a download on client side would work. I would like once my button is clicked it will download the files and upload them for the user. Is that possible? @localdev – Shane Marotta May 29 '21 at 20:56
  • This should do the trick https://stackoverflow.com/a/15832662/12594730 – Fennec May 29 '21 at 21:00
  • I appreciate such a speedy reply. Definitely like I expected, howver, is there a way for the download to be automatically uploaded without any user interaction, besides clicking the button? @localdev – Shane Marotta May 29 '21 at 21:07
  • The function in the link doesn't need interaction, the download will be triggered automatically when you call it. just give it your `dataURL` a name call it `downloadURI("data:image/jpeg,...", "image1.jpg");` and that's it – Fennec May 29 '21 at 21:11
  • Yea that works, I guess what I'm asking is once I hit the button and the image is downloaded, is there anyway for that downloaded image to be uploaded to the input[file='type'](drag and drop upload). Or does the user have to manually select the downloaded images from their desktop for it to be uploaded? @localdev – Shane Marotta May 29 '21 at 21:19
  • The user have the images in the first place, downloading them then upload them again is an app design flow ... If you need to display the images or do some manipulations on them give the user the ability to do so in the first place. – Fennec May 29 '21 at 21:32
  • This photo will help explain what I am trying to say: https://scontent-lga3-2.xx.fbcdn.net/v/t1.6435-9/193968752_1205777173213480_3596098195218468017_n.jpg?_nc_cat=104&ccb=1-3&_nc_sid=0d5531&_nc_ohc=3cFNyN1YMwEAX-TS3rl&_nc_ht=scontent-lga3-2.xx&oh=8c2deb1f371dd2317527878c494b9477&oe=60D78E01 . – Shane Marotta May 29 '21 at 22:24
  • Please refer to photo provided in recent comment for clarification.When the button is clicked the downloaded image appears at bottom of page as seen in the photo. Is there anyway for that downloaded image to be inserted into the 'Add Photos' section in the image I provided? The goal is once the button is clicked, the image will be downloaded and also added to the "add photos" sections, if possible? @localdev – Shane Marotta May 29 '21 at 22:30
  • Sorry for the late response ... you have the the image `dataURL` you can do what ever you want with it, if you want to display the image somewhere a simple `` or `var img = new Image(); img.src=dataURL; body.appendChild(img);` will do ... And yes you can display it, download it, store it in a server, resize or manipulate it, all at the same time ... it's up to you and the logic of your app just make it intuitive and user friendly ... my advice is to see what other similar app are doing and get some inspiration from theme ... Good luck. – Fennec May 30 '21 at 11:20
  • Thanks for all the help and advice! Definitely helped me out @localdev – Shane Marotta May 30 '21 at 16:30
  • I am a little confused. When I use what you provided for uploading the image, it just adds the image src as a child element, but does not actually input anything. Do you know of any others routes. I am now trying a new method, in which i create a file of the image and then append it the upload section. @localdev What do you think? HERE IS THE CODE: const dT = new ClipboardEvent('').clipboardData || new DataTransfer(); dT.items.add(new File(result.products[pointer][3], 'product_image.png')); document.querySelector('input[class="mkhogb32"]').files = dT.files; – Shane Marotta May 31 '21 at 03:11

0 Answers0