0

I am looking at uploading an image via url, I have looked into this. I read image from google images with a custom search and print them on the DOM, I would like to be able to select the images I see and set them as a value or something to be able to upload them on my server.

html dom i get is:

<button type="button">
  <img src="http://img.jpg">
</button>
<button type="button">
  <img src="http://img2.jpg">
</button>
<button type="button">
  <img src="http://img3.jpg">
</button>

  Select images: <input type="file" name="img" multiple>
  <input type="submit">

How about clicking the img buttons and set them as files to upload? The PHP part to send the whole page is fine.

Community
  • 1
  • 1
rob.m
  • 9,843
  • 19
  • 73
  • 162

1 Answers1

0

You don't actually upload the image files, because they reside on another server.

After you have displayed the images on your page, you have to implement your client side select logic and save the image urls to an array or hidden input field, it depends if you want to use ajax or an usual postback in order to save them on the server.

Here is a javascript example how to select images and store them into an array or whatever:

$(function () {
var imageUrls = [];
$(".imageContainer img").on("click", function () {
 var $img = $(this);
    var url = $img.attr("src");
 var index = imageUrls.indexOf(url);
  
 if (index === -1) {
  imageUrls.push(url);
        $img.addClass("selected");
 } else {
  imageUrls.splice(index, 1);
        $img.removeClass("selected");
 }
  
  console.dir(JSON.stringify(imageUrls));
})
});
div{
  margin-top:60px;
}

img{
  height:80px;
}

.selected{
  border: 3px solid green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<div class="imageContainer">
 <img src="http://i.imgur.com/nN8NqpI.gif" />
 <img src="http://i.imgur.com/vj8HEPl.jpg" />
</div>
</body>
</html>

Transfering the urls to the server depends on, if you want to use ajax or a normal postback.

On the server you can the do something like this (C#), I don't know the PHP API. But the important thing here, that you only have to submit the urls, there are no files to upload!

using (WebClient client = new WebClient()) 
{
  foreach (var url in urlArray)
   {
     client.DownloadFileAsync(url, "aNameForTheImage");
   }
}
Legends
  • 21,202
  • 16
  • 97
  • 123
  • @rob.m mentioned that server side implementation is PHP – Rehban Khatri Jan 01 '17 at 12:34
  • Ups...:D, you are right, he should use the php equivalent then :O – Legends Jan 01 '17 at 12:36
  • Anyways, he has to collect the urls on the client side via javascript and send the url's to the server. He already knows, how to do it serverside in php. – Legends Jan 01 '17 at 12:40
  • @RehbanKhatri, updated, feel free to ask for more if something is missing.. – Legends Jan 01 '17 at 13:22
  • @Legends so basically we are saving the url path and recalling it on page load. It's ok and I thought of it but what if the image on the remote server is gone? By doing this we are not saving the image on our server, yet thanks for the js as it is a step i needed anyway – rob.m Jan 01 '17 at 13:46
  • You have to specify exactly what you want to accomplish. You can save the external images in your application or you can save only the urls. So if you save only the url, if the external server removes the images, then they are gone, otherwise you have to download them to be sure to have them available. – Legends Jan 01 '17 at 13:58
  • set the input upload value as a string we get from a url path, in order to send to our server the actual image. e.g. upload from web. See linked post in the question – rob.m Jan 01 '17 at 14:05
  • 1
    you cannot [set the value of the file input control via javascript](http://stackoverflow.com/questions/1696877/how-to-set-a-value-to-a-file-input-in-html), it's not possible, you can only read it – Legends Jan 01 '17 at 14:11
  • @Legends thanks yea, that's why the question. Happy new year! – rob.m Jan 01 '17 at 14:29
  • Appreciate an upvote if it answers your question. Happy new year ;-) – Legends Jan 01 '17 at 15:22