CODEWITHSUNDEEP
javascriptimagesave
user1330705
user1330705

Reputation: 45

How can I save a drag and dropped image to the server?

First of all, background. Everything is behind a corporate firewall, so there is no showing a live version or accessing nifty tools like nodeJS or many libraries.

I have HTML, php 5, javascript, and jquery1.9.

I have an web window with a bunch of data. I want to allow users to be able to drop a picture called a sleuth image into a box, show that box, and save that image in a special location on my server. The sleuth image is a dynamically generated graph on a different internal server that I have no privileges whatsoever on (another department). While it could be named anything, I want to save it with a specific name so it displays properly later when the web window for this data is reloaded.

I have this javascript function which allows them to drop an image and displays it. I just need it to save the image to a .png. 

	function drop_handler(event) {
	// this is part of the ability to drag sleuth images onto the OOC
	// Prevent default behavior (Prevent file from being opened)
		event.preventDefault();
 		var items = event.dataTransfer.items;
		for (var i = 0; i < items.length; i++) {
			var item = items[i];
			if (item.kind === 'string') {
				item.getAsString(function(data) {
				document.getElementById("sleuth").innerHTML = data;
				});
			}
		} 
	}

I need to save the img src that show up in the variable "data" AS "sleuthImg.png"

Yes, I know I need to add validation. First, I need this part to work.

Upvotes: 0

Views: 276

Answers (1)

lemieuxster
lemieuxster

Reputation: 1081

First, you will need an endpoint on the server that can accept files and store them. Assuming you have that part already, then:

Get the file from the dataTransfer object https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/files

Then create a new FormData https://developer.mozilla.org/en-US/docs/Web/API/FormData

var formData = new FormData();
formData.append('file', fileFromDataTransfer);
formData.append('mime_type', fileFromDataTransfer.type);

(where 'file' is the name of the post parameter that your server is expecting. 'mime_type' is another form data parameter included as an example)

Then, using the request-making library of your choosing, make a POST request with the form data. 

post('your/upload/endpoint', formData);

Upvotes: 1

Related Questions