2021-05-31

How to programmatically upload a file to input[type=file]

My problem is, I had image srcs I converted to dataUrls. I am now trying to convert the dataUrl to a file and programmatically upload the file to an input[type='file'].

I was able to successfully get the dataUrls of the images, however, I am now creating the function that downloads the dataUrl. The dataUrl downloads, however, in addition to downloading the dataUrl, I want it to also be uploaded to that input[type=file] section.

The code seems to work fine, however, the image never actually uploads. I included a picture of the terminal for when the program runs. It says the input section has the file I added('product_image.png'). But for website I am trying to upload the photo, when a png file is uploaded it displays the image in the same section. However, that is not happening.

Am I not properly providing a source for the file? is the code wrong?

If anyone sees the problem, please let me know!

Terminal Page

  function downloadURI(uri, name) {
            var link = document.createElement("a");
            link.download = name;
            link.href = uri;
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
            delete link;

            const dT = new ClipboardEvent('').clipboardData || 
              new DataTransfer(); 
            dT.items.add(new File([uri], 'product_image.png'));
            document.querySelector('input[class="mkhogb32"]').files = dT.files;
            console.log(dT);
            console.log(document.querySelector('input[class="mkhogb32"]').files);
          }

Here is an example call:

downloadURI("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAFmklEQVRYR+1YWUiVaxRdx1nLOh7NynMpDbOOA4Z5pdvgQNFDb3VJIknqoVIQExyTNBHRCppoEkW0yVKQsMT7IBZGEZoiRaSlpSYOWM6m5HhZW4x75db5f4en24aDcv7z/Xt9a++99v4+zdTU1BTmaa9fv8a1a9fw9OlTTE5OwtvbGwEBAVi6dCl27NiBdevWzdmDZj4A29racPLkSTx48ABDQ0Pw9fXFnj174O/vj9HRUTx8+BAvXrzA3r17ERsbCxsbG9VA5wywtbUV8fHxKCwsxMTEBHbt2oXTp09j+/bt30F8/foVO3fuRGVlJY4cOYKUlBSsWbNGFcg5ARwfH0dCQgLOnz8vzjZt2oTs7GxhcLa9ffsWHh4e8vXhw4eRm5u7+ABLSkoQFhYGhpiWnp4uof6RkdX379/D3t4eOTk52Lp1q2KQc2IwNDQUt2/flpxiEWRmZsLZ2fmHTo8fP466ujp8+fIFBw4cQHJy8uIBZM6Rvd7eXlhaWuLWrVsIDg7+qcNLly4hPz9fcnXDhg3yv1JTzWBISIg40Ol00Gg0wooxe/78uRQQjarGql+2bJmxZfJcFcBPnz7Bx8cH3d3dsphs7t+/36ijd+/e4ejRo7C2tpZNJSUlYdu2bUbXqQZYUFCAY8eOYWBgAHZ2dqJxDJkxa2hoQHh4OExNTTE2NiY5GBgYaGyZegYPHTqEu3fvSpjo4MmTJ4qcEGBUVJSIN7WRerh7925Fa1WF2MvLC2/evJEXnzlzRoRaibGC4+LihHl2nIyMjMUB6OLigubmZixZsgQvX76EwWBQgg81NTUi7Kx8ivzVq1f/1XF+9hJVDFLrWlpapNdWVFQoAscfPX78WNgmwOXLl4uGuru7K1qvCiClpa+vD6dOnUJqaqoiB/wRZSU6OhqDg4My2bATrVixQtF6VQApERTnvLw86QhKjbp54sQJjIyMyChWXl4OKysrRcsVA7x48SJu3LghIaZksDsotaSkZFy+fFkY5GTj5/e70qXKhZoD6YULF/Dx40eZWmJiYsCqNpZLk5MAuw9FndrJoUGn0y48QDogC+wmXV1dMDc3l4k5Pj4BBw+GYOXK/86p4uJHspnGxkZs3rwZ1dVVisGp6iRpaWm4f/++dANWIwfWadMISIo4da6srAzV1dUiyNwAWbtz544MChwqCgruLTxA5g3Zo/bR+vv78fnz5+8AV61aLeMWi4AzIiudWunk5CRdh+wRaGJiIqKiIhce4Llz5+R8wSqmQ7LX2dkpYV6/3g39/QPo6emRyiQoMse2RtaampoEkJubmwyrBoPx3v3PHSiq4sjISBQXF8uASmbYrvjhhGxubgGeCwmIz8gkpYjFROY4HHBjLKaKCmW9WzXAs2fPCoOUCTMzM3z79k3CTIBk0MrKWkJOVrVaLfR6vQDu6OjAhw8fZJ2rqytevapVFV7FRcJmf+XKFZSWloqDGZAM5ZYtf2BwcOj7IEAhnjleEiDX8rN27Vr5a2KiDqOiEDOXsrKyRJwp1Gx5HD6Zj3r9b9Dp7KWF8dBuYmIiAy0ZJSB+x5zloFtTM11kakwRQL6QRcDTG4EyZDSCMRjcodXawdPTU6qYIaXEsGAoR5ymbW1tERERgfT0NDXYpkVMzc0Cc+z69evS/Nvb22V0IoOjo2NwcHAQUBzHmJ8sIj5nwfCQxQHDwUG3uABn3l5fXy/jflVVFfbt+xOlpX/h5s2bwtiMkV3mKK88eKug169WDU41g7M9PHv2TAbP1tbpOxqG1sLCAhs3bpTLIx6MLC3N5wRsZpGqEM/2NDw8jLq6ejg7u6C2thZBQUEwNdVgfHwSZmYqy/UH25gXQL7z0aMS+Pn5gXcwQUHKTmpqKJ03wKKiIjg6OsqtFbVuoe0XwPky+ovBXwwaY+B/X8V/A+fXNLaIW65OAAAAAElFTkSuQmCC", 'image1.png');



from Recent Questions - Stack Overflow https://ift.tt/3c2hLe4
https://ift.tt/eA8V8J

No comments:

Post a Comment