How to upload a file to a webserver with its name in the url

Question

I want to upload an image from my phone via an app to the server.

Using PHP I always have to submit a form but I can't, since I just call open a link: http://xxx.yy/?file=C:/xxx/yyy/zzz.png

Do I have any other possibilities to upload an image from an android application to a webserver?

How do I upload the file with the filepath given in the URL?

You can't, that would be a huge security hole, that would allow any script to arbitrarily upload any file at any time — Patrick Evans, Aug 18 '17 at 19:46
Why are `ajax` and `jquery` tags at Question where requirement appears to be using a query string to upload a file? — guest271314, Aug 18 '17 at 19:49
@guest271314 Because this can possibly be realised with ajax and jquery? — the_dani, Aug 18 '17 at 19:51
You would still need to access the `File` object. Unless you have an existing reference to a `data URL` or text of the file. — guest271314, Aug 18 '17 at 19:55
But there are so many apps uploading images.. How do Snapchat or WhatsApp do this? — the_dani, Aug 18 '17 at 19:58
@the_dani Not certain. Have not tried either of those applications. Have you asked the authors of the applications how they accomplish the task? "So many" does not mean that there is more than N procedures possible to do X. If you had a `data URI` representation of the file, you could achieve requirement using a query string. — guest271314, Aug 18 '17 at 20:11
The user should not be disturbed while using the app.. The "webserver" is a Raspberry, which should save the images locally... — the_dani, Aug 18 '17 at 20:24
Possible duplicate oof https://stackoverflow.com/questions/5060757/php-file-upload-using-url-parameters, https://stackoverflow.com/questions/33917078/uploading-1000-images-via-url-using-php, https://stackoverflow.com/questions/12711584/how-to-specify-a-local-file-within-html-using-the-file-scheme — Jay Blanchard, Aug 18 '17 at 20:34
@guest271314 getting the image as a string shouldn't be the problem in Java, but bow do I pass it on the server and how do I cast it into an image back on the server? — the_dani, Aug 18 '17 at 20:44
See: https://scotch.io/tutorials/use-the-html5-file-api-to-work-with-files-locally-in-the-browser and https://www.html5rocks.com/en/tutorials/file/dndfiles/ — Jay Blanchard, Aug 18 '17 at 20:49
@guest271314 The app uploading the image is written in java... — the_dani, Aug 18 '17 at 20:56
_"But there are so many apps uploading images.. How do Snapchat or WhatsApp do this?"_ those are native OS apps. They have a different access level than a browser app. Browser app's require user interaction in order to get access to a file. Native apps get that permission at install time (android) or on per use basis (ios) — Patrick Evans, Aug 19 '17 at 16:15

score 0 · Answer 1 · answered Aug 18 '17 at 21:10

You can request the file from local filesystem as a Blob using XMLHttpRequest() or fetch() utilize FileReader to convert the Blob to a data URI, set the .href property of an <a> element to path to server with query string where data URI is value of query, call .click() on <a> element. At server process query string parameters at GET request to process data URI representation of file.

const a = document.createElement("a");
document.body.appendChild(a);
const reader = new FileReader;
reader.onload = () => {
  a.href = `/path/to/server?file=${reader.result}`;
  a.click();
}

fetch("/path/to/local/file")
.then(response => response.blob())
.then(blob => reader.readAsDataURL(blob))
.catch(err => console.error(err));

How to upload a file to a webserver with its name in the url

1 Answers1