how to upload an image by its data uri to a file input via javascript?
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
0
I've got this line of code
<div class="user-post-image"> </div>
<input type="file" name="upload-image" id="upload-image" required />
and I have this image
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAMAAAD04JH5AAAAS1BMVEUAAAACCBEBBQsDCxYBBAkZTZoCCBAAAQIBAwcAAgUYSJAOLFgCCBASNmwVPn0KHz8RM2YVQIEHFSoYSZISOHAXRosdV6wbUqMdVqpe5uSXAAAAFnRSTlMAIStBF/w2Aw8I7aBNwNqBY6ln3IXGCM4jMgAABJhJREFUeF7tmuly5CAMhMNpwPcleP8nXRkmoXZTGbMaJv7jfoGvJVrCZfvjzbp169atW7duWSMZ49xeRtfTvK9uZb/ObiQXyN7X1Snllf5ofpFt2LTNu/OogAIANTW/ZSD1XB3oLFCb+RUDWPnulEIiIDYL/Mzs2xvPpnk9mg6ZnrVy+9YWWKQ7H3Lp/8oJ27y1dqc8hCdy09tCYPWGmfux9JzC94TApNZDeC5Q7VsMsGnH4gsEvpf1Q8CO3kMoNVA7BHJbfYBQKBjQwGX4+gbMtMejv8qA3lWA6wzIzXmAcJUBO62x/KsMsDlO3mUGRCz/MgN2i/jLDGD7EXCdAb17IPPV66t4cgR+vbvAbo6Uvnwdv2bA5PgRDWwvGTA5fkS5RdrmQn5wHRq4kB9WQTdgN58B5CHQ0hL5zfZ6/aBabiwN/zGpUMHAyExD4wsXahhYqFPI4v59WSt1COwc+RUySDSAAaggCC2jDYFeA9Qw4EdSBBpT4wBQ4Do0QJrAKvwAAy0Ccg915FuOBggN8JUaoBZmLGUFBAhV5ARhDzZNtQT4mXQCcq92AiNDAxc0IO9hygnY2YdaJ6AlwYBeQ6h4Av8/g4uqxA9DR2mAnGtF0Lc8GyhvQLUTCG4hzkBBcUU96jUjnUDBECpXwFcjpzTg/EkM/DD2BQkYBOEeaOx5BHy/LK5kBjllBszZGgTVd11bMChDR3kYs3I7MaDaTpc0wI+ctIb57OGEL0Rf2gCCAfE8g6oVmm+qegOygWkNZ3xRsqkGwaWlGNjcs7IOPitY1aCoDbCtesbvNJdTyQH01AaY1j/NP5clVwW4JTaAYqCHn6pKfFlyAL7VTFqKAfOjAfD9wTdxTZyPYFyC1QxkvhWu6EFIM2NpBmQPz/jxpqInkG7ADwvyjdmQf6qcwDoGMj8+q5ATSDcAkY9F8TUUqBcxgWQD6hs/uMQ3cyiZgCUmkGzg2yYEcOPBt82myiYgJpBuwP3DjxcQ8j9EWQDSAdANjKv/G/DgHwEomcCOH2apaqycdg//lBRDbWZfUP/Q5QkgGhCzh79LSkNV8trauyUHgGqAtx6+LcDC17aY1hwAagjYpiDz0wKyZa9tVZqWl3/FcnkAPvmm7CEopfVFA1KsX/y0AIoCACHycwDoIcgfKbGkxJ/UOd/V4KOs4a2CvxbAB189EPjkM1iiAfAPfkEAwA91+MlA52JNjwXQ2E2d8vulAj+HoPdHTWkBnAUgXRZdLT7KStb6OICJz9ez8t3YpWGp9lPm4h47DfknL00BFLY/8+sY0EMawBSAk/KP9nOZ+VXOYGsT//mHIzjwi0CrFfkoa5jWif/kCoID34+f5Wd+lTlgLA7gz1cQQHjgc/k1W4BCfvPTl0Okq6FdOiE0S+XXFZIRj9oUICwLUIhHej8iXtcvP1tIH868Dx6+FLz3QblE/8JnfnUTemz7wakvIbpvEd4h/qAX4ulZNFJ3yzi2D43jclQuIv0ovhhPHwauEdclPdiaRzriy+n0DjDOdVZkH50nFE90YKSU7FMSZSKcQCcJQdZakxTRteG3bt26devWrT+iVfLjHE+E5QAAAABJRU5ErkJggg==
, which I have saved to my PC, though I don't want to. When I actually upload this image, the webpage changes the div element's innerHTML with the
<img src='data:image/png;base64....'>
of my uploaded image. So I tried to change this (the div) via javascript, but it doesn't let me move on. It needs to get some kind of value on the input element, which is required, unfortunately. How do I upload my image by "giving" to the input file tag the image's data uri "value"?
javascript file input data-uri
asked Nov 23 '18 at 20:35
Mook KoomMook Koom
51
add a comment |
0
I've got this line of code
<div class="user-post-image"> </div>
<input type="file" name="upload-image" id="upload-image" required />
and I have this image
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAMAAAD04JH5AAAAS1BMVEUAAAACCBEBBQsDCxYBBAkZTZoCCBAAAQIBAwcAAgUYSJAOLFgCCBASNmwVPn0KHz8RM2YVQIEHFSoYSZISOHAXRosdV6wbUqMdVqpe5uSXAAAAFnRSTlMAIStBF/w2Aw8I7aBNwNqBY6ln3IXGCM4jMgAABJhJREFUeF7tmuly5CAMhMNpwPcleP8nXRkmoXZTGbMaJv7jfoGvJVrCZfvjzbp169atW7duWSMZ49xeRtfTvK9uZb/ObiQXyN7X1Snllf5ofpFt2LTNu/OogAIANTW/ZSD1XB3oLFCb+RUDWPnulEIiIDYL/Mzs2xvPpnk9mg6ZnrVy+9YWWKQ7H3Lp/8oJ27y1dqc8hCdy09tCYPWGmfux9JzC94TApNZDeC5Q7VsMsGnH4gsEvpf1Q8CO3kMoNVA7BHJbfYBQKBjQwGX4+gbMtMejv8qA3lWA6wzIzXmAcJUBO62x/KsMsDlO3mUGRCz/MgN2i/jLDGD7EXCdAb17IPPV66t4cgR+vbvAbo6Uvnwdv2bA5PgRDWwvGTA5fkS5RdrmQn5wHRq4kB9WQTdgN58B5CHQ0hL5zfZ6/aBabiwN/zGpUMHAyExD4wsXahhYqFPI4v59WSt1COwc+RUySDSAAaggCC2jDYFeA9Qw4EdSBBpT4wBQ4Do0QJrAKvwAAy0Ccg915FuOBggN8JUaoBZmLGUFBAhV5ARhDzZNtQT4mXQCcq92AiNDAxc0IO9hygnY2YdaJ6AlwYBeQ6h4Av8/g4uqxA9DR2mAnGtF0Lc8GyhvQLUTCG4hzkBBcUU96jUjnUDBECpXwFcjpzTg/EkM/DD2BQkYBOEeaOx5BHy/LK5kBjllBszZGgTVd11bMChDR3kYs3I7MaDaTpc0wI+ctIb57OGEL0Rf2gCCAfE8g6oVmm+qegOygWkNZ3xRsqkGwaWlGNjcs7IOPitY1aCoDbCtesbvNJdTyQH01AaY1j/NP5clVwW4JTaAYqCHn6pKfFlyAL7VTFqKAfOjAfD9wTdxTZyPYFyC1QxkvhWu6EFIM2NpBmQPz/jxpqInkG7ADwvyjdmQf6qcwDoGMj8+q5ATSDcAkY9F8TUUqBcxgWQD6hs/uMQ3cyiZgCUmkGzg2yYEcOPBt82myiYgJpBuwP3DjxcQ8j9EWQDSAdANjKv/G/DgHwEomcCOH2apaqycdg//lBRDbWZfUP/Q5QkgGhCzh79LSkNV8trauyUHgGqAtx6+LcDC17aY1hwAagjYpiDz0wKyZa9tVZqWl3/FcnkAPvmm7CEopfVFA1KsX/y0AIoCACHycwDoIcgfKbGkxJ/UOd/V4KOs4a2CvxbAB189EPjkM1iiAfAPfkEAwA91+MlA52JNjwXQ2E2d8vulAj+HoPdHTWkBnAUgXRZdLT7KStb6OICJz9ez8t3YpWGp9lPm4h47DfknL00BFLY/8+sY0EMawBSAk/KP9nOZ+VXOYGsT//mHIzjwi0CrFfkoa5jWif/kCoID34+f5Wd+lTlgLA7gz1cQQHjgc/k1W4BCfvPTl0Okq6FdOiE0S+XXFZIRj9oUICwLUIhHej8iXtcvP1tIH868Dx6+FLz3QblE/8JnfnUTemz7wakvIbpvEd4h/qAX4ulZNFJ3yzi2D43jclQuIv0ovhhPHwauEdclPdiaRzriy+n0DjDOdVZkH50nFE90YKSU7FMSZSKcQCcJQdZakxTRteG3bt26devWrT+iVfLjHE+E5QAAAABJRU5ErkJggg==
, which I have saved to my PC, though I don't want to. When I actually upload this image, the webpage changes the div element's innerHTML with the
<img src='data:image/png;base64....'>
of my uploaded image. So I tried to change this (the div) via javascript, but it doesn't let me move on. It needs to get some kind of value on the input element, which is required, unfortunately. How do I upload my image by "giving" to the input file tag the image's data uri "value"?
javascript file input data-uri
asked Nov 23 '18 at 20:35
Mook KoomMook Koom
51
add a comment |
0
0
0
I've got this line of code
<div class="user-post-image"> </div>
<input type="file" name="upload-image" id="upload-image" required />
and I have this image
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAMAAAD04JH5AAAAS1BMVEUAAAACCBEBBQsDCxYBBAkZTZoCCBAAAQIBAwcAAgUYSJAOLFgCCBASNmwVPn0KHz8RM2YVQIEHFSoYSZISOHAXRosdV6wbUqMdVqpe5uSXAAAAFnRSTlMAIStBF/w2Aw8I7aBNwNqBY6ln3IXGCM4jMgAABJhJREFUeF7tmuly5CAMhMNpwPcleP8nXRkmoXZTGbMaJv7jfoGvJVrCZfvjzbp169atW7duWSMZ49xeRtfTvK9uZb/ObiQXyN7X1Snllf5ofpFt2LTNu/OogAIANTW/ZSD1XB3oLFCb+RUDWPnulEIiIDYL/Mzs2xvPpnk9mg6ZnrVy+9YWWKQ7H3Lp/8oJ27y1dqc8hCdy09tCYPWGmfux9JzC94TApNZDeC5Q7VsMsGnH4gsEvpf1Q8CO3kMoNVA7BHJbfYBQKBjQwGX4+gbMtMejv8qA3lWA6wzIzXmAcJUBO62x/KsMsDlO3mUGRCz/MgN2i/jLDGD7EXCdAb17IPPV66t4cgR+vbvAbo6Uvnwdv2bA5PgRDWwvGTA5fkS5RdrmQn5wHRq4kB9WQTdgN58B5CHQ0hL5zfZ6/aBabiwN/zGpUMHAyExD4wsXahhYqFPI4v59WSt1COwc+RUySDSAAaggCC2jDYFeA9Qw4EdSBBpT4wBQ4Do0QJrAKvwAAy0Ccg915FuOBggN8JUaoBZmLGUFBAhV5ARhDzZNtQT4mXQCcq92AiNDAxc0IO9hygnY2YdaJ6AlwYBeQ6h4Av8/g4uqxA9DR2mAnGtF0Lc8GyhvQLUTCG4hzkBBcUU96jUjnUDBECpXwFcjpzTg/EkM/DD2BQkYBOEeaOx5BHy/LK5kBjllBszZGgTVd11bMChDR3kYs3I7MaDaTpc0wI+ctIb57OGEL0Rf2gCCAfE8g6oVmm+qegOygWkNZ3xRsqkGwaWlGNjcs7IOPitY1aCoDbCtesbvNJdTyQH01AaY1j/NP5clVwW4JTaAYqCHn6pKfFlyAL7VTFqKAfOjAfD9wTdxTZyPYFyC1QxkvhWu6EFIM2NpBmQPz/jxpqInkG7ADwvyjdmQf6qcwDoGMj8+q5ATSDcAkY9F8TUUqBcxgWQD6hs/uMQ3cyiZgCUmkGzg2yYEcOPBt82myiYgJpBuwP3DjxcQ8j9EWQDSAdANjKv/G/DgHwEomcCOH2apaqycdg//lBRDbWZfUP/Q5QkgGhCzh79LSkNV8trauyUHgGqAtx6+LcDC17aY1hwAagjYpiDz0wKyZa9tVZqWl3/FcnkAPvmm7CEopfVFA1KsX/y0AIoCACHycwDoIcgfKbGkxJ/UOd/V4KOs4a2CvxbAB189EPjkM1iiAfAPfkEAwA91+MlA52JNjwXQ2E2d8vulAj+HoPdHTWkBnAUgXRZdLT7KStb6OICJz9ez8t3YpWGp9lPm4h47DfknL00BFLY/8+sY0EMawBSAk/KP9nOZ+VXOYGsT//mHIzjwi0CrFfkoa5jWif/kCoID34+f5Wd+lTlgLA7gz1cQQHjgc/k1W4BCfvPTl0Okq6FdOiE0S+XXFZIRj9oUICwLUIhHej8iXtcvP1tIH868Dx6+FLz3QblE/8JnfnUTemz7wakvIbpvEd4h/qAX4ulZNFJ3yzi2D43jclQuIv0ovhhPHwauEdclPdiaRzriy+n0DjDOdVZkH50nFE90YKSU7FMSZSKcQCcJQdZakxTRteG3bt26devWrT+iVfLjHE+E5QAAAABJRU5ErkJggg==
, which I have saved to my PC, though I don't want to. When I actually upload this image, the webpage changes the div element's innerHTML with the
<img src='data:image/png;base64....'>
of my uploaded image. So I tried to change this (the div) via javascript, but it doesn't let me move on. It needs to get some kind of value on the input element, which is required, unfortunately. How do I upload my image by "giving" to the input file tag the image's data uri "value"?
javascript file input data-uri
asked Nov 23 '18 at 20:35
Mook KoomMook Koom
51
I've got this line of code
<div class="user-post-image"> </div>
<input type="file" name="upload-image" id="upload-image" required />
and I have this image
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAMAAAD04JH5AAAAS1BMVEUAAAACCBEBBQsDCxYBBAkZTZoCCBAAAQIBAwcAAgUYSJAOLFgCCBASNmwVPn0KHz8RM2YVQIEHFSoYSZISOHAXRosdV6wbUqMdVqpe5uSXAAAAFnRSTlMAIStBF/w2Aw8I7aBNwNqBY6ln3IXGCM4jMgAABJhJREFUeF7tmuly5CAMhMNpwPcleP8nXRkmoXZTGbMaJv7jfoGvJVrCZfvjzbp169atW7duWSMZ49xeRtfTvK9uZb/ObiQXyN7X1Snllf5ofpFt2LTNu/OogAIANTW/ZSD1XB3oLFCb+RUDWPnulEIiIDYL/Mzs2xvPpnk9mg6ZnrVy+9YWWKQ7H3Lp/8oJ27y1dqc8hCdy09tCYPWGmfux9JzC94TApNZDeC5Q7VsMsGnH4gsEvpf1Q8CO3kMoNVA7BHJbfYBQKBjQwGX4+gbMtMejv8qA3lWA6wzIzXmAcJUBO62x/KsMsDlO3mUGRCz/MgN2i/jLDGD7EXCdAb17IPPV66t4cgR+vbvAbo6Uvnwdv2bA5PgRDWwvGTA5fkS5RdrmQn5wHRq4kB9WQTdgN58B5CHQ0hL5zfZ6/aBabiwN/zGpUMHAyExD4wsXahhYqFPI4v59WSt1COwc+RUySDSAAaggCC2jDYFeA9Qw4EdSBBpT4wBQ4Do0QJrAKvwAAy0Ccg915FuOBggN8JUaoBZmLGUFBAhV5ARhDzZNtQT4mXQCcq92AiNDAxc0IO9hygnY2YdaJ6AlwYBeQ6h4Av8/g4uqxA9DR2mAnGtF0Lc8GyhvQLUTCG4hzkBBcUU96jUjnUDBECpXwFcjpzTg/EkM/DD2BQkYBOEeaOx5BHy/LK5kBjllBszZGgTVd11bMChDR3kYs3I7MaDaTpc0wI+ctIb57OGEL0Rf2gCCAfE8g6oVmm+qegOygWkNZ3xRsqkGwaWlGNjcs7IOPitY1aCoDbCtesbvNJdTyQH01AaY1j/NP5clVwW4JTaAYqCHn6pKfFlyAL7VTFqKAfOjAfD9wTdxTZyPYFyC1QxkvhWu6EFIM2NpBmQPz/jxpqInkG7ADwvyjdmQf6qcwDoGMj8+q5ATSDcAkY9F8TUUqBcxgWQD6hs/uMQ3cyiZgCUmkGzg2yYEcOPBt82myiYgJpBuwP3DjxcQ8j9EWQDSAdANjKv/G/DgHwEomcCOH2apaqycdg//lBRDbWZfUP/Q5QkgGhCzh79LSkNV8trauyUHgGqAtx6+LcDC17aY1hwAagjYpiDz0wKyZa9tVZqWl3/FcnkAPvmm7CEopfVFA1KsX/y0AIoCACHycwDoIcgfKbGkxJ/UOd/V4KOs4a2CvxbAB189EPjkM1iiAfAPfkEAwA91+MlA52JNjwXQ2E2d8vulAj+HoPdHTWkBnAUgXRZdLT7KStb6OICJz9ez8t3YpWGp9lPm4h47DfknL00BFLY/8+sY0EMawBSAk/KP9nOZ+VXOYGsT//mHIzjwi0CrFfkoa5jWif/kCoID34+f5Wd+lTlgLA7gz1cQQHjgc/k1W4BCfvPTl0Okq6FdOiE0S+XXFZIRj9oUICwLUIhHej8iXtcvP1tIH868Dx6+FLz3QblE/8JnfnUTemz7wakvIbpvEd4h/qAX4ulZNFJ3yzi2D43jclQuIv0ovhhPHwauEdclPdiaRzriy+n0DjDOdVZkH50nFE90YKSU7FMSZSKcQCcJQdZakxTRteG3bt26devWrT+iVfLjHE+E5QAAAABJRU5ErkJggg==
, which I have saved to my PC, though I don't want to. When I actually upload this image, the webpage changes the div element's innerHTML with the
<img src='data:image/png;base64....'>
of my uploaded image. So I tried to change this (the div) via javascript, but it doesn't let me move on. It needs to get some kind of value on the input element, which is required, unfortunately. How do I upload my image by "giving" to the input file tag the image's data uri "value"?
javascript file input data-uri
javascript file input data-uri
asked Nov 23 '18 at 20:35
Mook KoomMook Koom
51
asked Nov 23 '18 at 20:35
Mook KoomMook Koom
51
edited Nov 23 '18 at 20:40
Mook Koom
asked Nov 23 '18 at 20:35
Mook KoomMook Koom
51
asked Nov 23 '18 at 20:35
Mook KoomMook Koom
51
asked Nov 23 '18 at 20:35
Mook KoomMook Koom
51
51
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
0
From reading your vague answer, I presume you have a function which auto converts the input file to the DIV.
So, this could possibly be a clone of Convert Data URI to File then append to FormData. From there you would send the file to a server or something by possibly an AJAX function.
var img = document.getElementsByClassName("user-post-image")[0]; //Get img data
var blob = dataURItoBlob(img); //Converts to blob using link above
var form = new FormData();
form.append("image", blob);
ajax.send(form); //The possible data sent.
Other then this, you may have to give more information about what "move on" means.
answered Nov 24 '18 at 1:40
Martin BradleyMartin Bradley
212
By move on I mean to click submit. What I have is a python script that can fetch the image, convert it to the URI, insert it in a piece of HTML code and then inject it via javascript into thedivelement. But this is irrelevant. It is only for the user to see what image he has uploaded. The form cannot be submitted if the form hasn't the required fields. So I want to inject into document.forms[1] (this is the form I want) the image URI. The data send is not a ploblem. Where did you (where do I) find that "image" string you put into form.append()? Is it the name, the id attritube?
– Mook Koom
Nov 24 '18 at 9:18
If you just want the src cant you just do .. document.getElementsByTagName("IMG")[0].src ? That would give the data uri?
– Martin Bradley
Nov 24 '18 at 11:23
I think you misunderstood. I don't want to use javascript in order to get something from a server. I want to manipulate a submit form in odrer to send data to a server by clicking or initiating a submit on a submit page whose input file has a "value" that I know of. I have the image URI, I want to send it as a file programmatically, like I had downloaded it and selected it with my mouse.
– Mook Koom
Nov 25 '18 at 10:14
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53452685%2fhow-to-upload-an-image-by-its-data-uri-to-a-file-input-via-javascript%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
From reading your vague answer, I presume you have a function which auto converts the input file to the DIV.
So, this could possibly be a clone of Convert Data URI to File then append to FormData. From there you would send the file to a server or something by possibly an AJAX function.
var img = document.getElementsByClassName("user-post-image")[0]; //Get img data
var blob = dataURItoBlob(img); //Converts to blob using link above
var form = new FormData();
form.append("image", blob);
ajax.send(form); //The possible data sent.
Other then this, you may have to give more information about what "move on" means.
answered Nov 24 '18 at 1:40
Martin BradleyMartin Bradley
212
By move on I mean to click submit. What I have is a python script that can fetch the image, convert it to the URI, insert it in a piece of HTML code and then inject it via javascript into thedivelement. But this is irrelevant. It is only for the user to see what image he has uploaded. The form cannot be submitted if the form hasn't the required fields. So I want to inject into document.forms[1] (this is the form I want) the image URI. The data send is not a ploblem. Where did you (where do I) find that "image" string you put into form.append()? Is it the name, the id attritube?
– Mook Koom
Nov 24 '18 at 9:18
If you just want the src cant you just do .. document.getElementsByTagName("IMG")[0].src ? That would give the data uri?
– Martin Bradley
Nov 24 '18 at 11:23
I think you misunderstood. I don't want to use javascript in order to get something from a server. I want to manipulate a submit form in odrer to send data to a server by clicking or initiating a submit on a submit page whose input file has a "value" that I know of. I have the image URI, I want to send it as a file programmatically, like I had downloaded it and selected it with my mouse.
– Mook Koom
Nov 25 '18 at 10:14
add a comment |
0
From reading your vague answer, I presume you have a function which auto converts the input file to the DIV.
So, this could possibly be a clone of Convert Data URI to File then append to FormData. From there you would send the file to a server or something by possibly an AJAX function.
var img = document.getElementsByClassName("user-post-image")[0]; //Get img data
var blob = dataURItoBlob(img); //Converts to blob using link above
var form = new FormData();
form.append("image", blob);
ajax.send(form); //The possible data sent.
Other then this, you may have to give more information about what "move on" means.
answered Nov 24 '18 at 1:40
Martin BradleyMartin Bradley
212
By move on I mean to click submit. What I have is a python script that can fetch the image, convert it to the URI, insert it in a piece of HTML code and then inject it via javascript into thedivelement. But this is irrelevant. It is only for the user to see what image he has uploaded. The form cannot be submitted if the form hasn't the required fields. So I want to inject into document.forms[1] (this is the form I want) the image URI. The data send is not a ploblem. Where did you (where do I) find that "image" string you put into form.append()? Is it the name, the id attritube?
– Mook Koom
Nov 24 '18 at 9:18
If you just want the src cant you just do .. document.getElementsByTagName("IMG")[0].src ? That would give the data uri?
– Martin Bradley
Nov 24 '18 at 11:23
I think you misunderstood. I don't want to use javascript in order to get something from a server. I want to manipulate a submit form in odrer to send data to a server by clicking or initiating a submit on a submit page whose input file has a "value" that I know of. I have the image URI, I want to send it as a file programmatically, like I had downloaded it and selected it with my mouse.
– Mook Koom
Nov 25 '18 at 10:14
add a comment |
0
0
0
From reading your vague answer, I presume you have a function which auto converts the input file to the DIV.
So, this could possibly be a clone of Convert Data URI to File then append to FormData. From there you would send the file to a server or something by possibly an AJAX function.
var img = document.getElementsByClassName("user-post-image")[0]; //Get img data
var blob = dataURItoBlob(img); //Converts to blob using link above
var form = new FormData();
form.append("image", blob);
ajax.send(form); //The possible data sent.
Other then this, you may have to give more information about what "move on" means.
answered Nov 24 '18 at 1:40
Martin BradleyMartin Bradley
212
From reading your vague answer, I presume you have a function which auto converts the input file to the DIV.
So, this could possibly be a clone of Convert Data URI to File then append to FormData. From there you would send the file to a server or something by possibly an AJAX function.
var img = document.getElementsByClassName("user-post-image")[0]; //Get img data
var blob = dataURItoBlob(img); //Converts to blob using link above
var form = new FormData();
form.append("image", blob);
ajax.send(form); //The possible data sent.
Other then this, you may have to give more information about what "move on" means.
answered Nov 24 '18 at 1:40
Martin BradleyMartin Bradley
212
answered Nov 24 '18 at 1:40
Martin BradleyMartin Bradley
212
answered Nov 24 '18 at 1:40
Martin BradleyMartin Bradley
212
answered Nov 24 '18 at 1:40
Martin BradleyMartin Bradley
212
212
By move on I mean to click submit. What I have is a python script that can fetch the image, convert it to the URI, insert it in a piece of HTML code and then inject it via javascript into thedivelement. But this is irrelevant. It is only for the user to see what image he has uploaded. The form cannot be submitted if the form hasn't the required fields. So I want to inject into document.forms[1] (this is the form I want) the image URI. The data send is not a ploblem. Where did you (where do I) find that "image" string you put into form.append()? Is it the name, the id attritube?
– Mook Koom
Nov 24 '18 at 9:18
If you just want the src cant you just do .. document.getElementsByTagName("IMG")[0].src ? That would give the data uri?
– Martin Bradley
Nov 24 '18 at 11:23
I think you misunderstood. I don't want to use javascript in order to get something from a server. I want to manipulate a submit form in odrer to send data to a server by clicking or initiating a submit on a submit page whose input file has a "value" that I know of. I have the image URI, I want to send it as a file programmatically, like I had downloaded it and selected it with my mouse.
– Mook Koom
Nov 25 '18 at 10:14
add a comment |
By move on I mean to click submit. What I have is a python script that can fetch the image, convert it to the URI, insert it in a piece of HTML code and then inject it via javascript into thedivelement. But this is irrelevant. It is only for the user to see what image he has uploaded. The form cannot be submitted if the form hasn't the required fields. So I want to inject into document.forms[1] (this is the form I want) the image URI. The data send is not a ploblem. Where did you (where do I) find that "image" string you put into form.append()? Is it the name, the id attritube?
– Mook Koom
Nov 24 '18 at 9:18
If you just want the src cant you just do .. document.getElementsByTagName("IMG")[0].src ? That would give the data uri?
– Martin Bradley
Nov 24 '18 at 11:23
I think you misunderstood. I don't want to use javascript in order to get something from a server. I want to manipulate a submit form in odrer to send data to a server by clicking or initiating a submit on a submit page whose input file has a "value" that I know of. I have the image URI, I want to send it as a file programmatically, like I had downloaded it and selected it with my mouse.
– Mook Koom
Nov 25 '18 at 10:14
By move on I mean to click submit. What I have is a python script that can fetch the image, convert it to the URI, insert it in a piece of HTML code and then inject it via javascript into the
div element. But this is irrelevant. It is only for the user to see what image he has uploaded. The form cannot be submitted if the form hasn't the required fields. So I want to inject into document.forms[1] (this is the form I want) the image URI. The data send is not a ploblem. Where did you (where do I) find that "image" string you put into form.append()? Is it the name, the id attritube?– Mook Koom
Nov 24 '18 at 9:18
By move on I mean to click submit. What I have is a python script that can fetch the image, convert it to the URI, insert it in a piece of HTML code and then inject it via javascript into the
div element. But this is irrelevant. It is only for the user to see what image he has uploaded. The form cannot be submitted if the form hasn't the required fields. So I want to inject into document.forms[1] (this is the form I want) the image URI. The data send is not a ploblem. Where did you (where do I) find that "image" string you put into form.append()? Is it the name, the id attritube?– Mook Koom
Nov 24 '18 at 9:18
If you just want the src cant you just do .. document.getElementsByTagName("IMG")[0].src ? That would give the data uri?
– Martin Bradley
Nov 24 '18 at 11:23
If you just want the src cant you just do .. document.getElementsByTagName("IMG")[0].src ? That would give the data uri?
– Martin Bradley
Nov 24 '18 at 11:23
I think you misunderstood. I don't want to use javascript in order to get something from a server. I want to manipulate a submit form in odrer to send data to a server by clicking or initiating a submit on a submit page whose input file has a "value" that I know of. I have the image URI, I want to send it as a file programmatically, like I had downloaded it and selected it with my mouse.
– Mook Koom
Nov 25 '18 at 10:14
I think you misunderstood. I don't want to use javascript in order to get something from a server. I want to manipulate a submit form in odrer to send data to a server by clicking or initiating a submit on a submit page whose input file has a "value" that I know of. I have the image URI, I want to send it as a file programmatically, like I had downloaded it and selected it with my mouse.
– Mook Koom
Nov 25 '18 at 10:14
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53452685%2fhow-to-upload-an-image-by-its-data-uri-to-a-file-input-via-javascript%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
