How do I add a simple image upload feature?

Question

I want to give my new website a feature where I can upload 1 image by a button and stores(local storage) the image on another .html page, then if I grab it's absolute URL I can post this on forums websites where it's preview will show, so far I have a function that let's me upload and preview an image.. But I want to go to another level.

HTML:

<input type="file" onchange="previewFile()"><br>
<img src="" height="200" alt="Image preview...">

Javascript:

<script>
   function previewFile(){
   var preview = document.querySelector('img'); //selects the query named img
   var file    = document.querySelector('input[type=file]').files[0]; //sames as here
   var reader  = new FileReader();

   reader.onloadend = function () {
       preview.src = reader.result;
   }

   if (file) {
       reader.readAsDataURL(file); //reads the data as a URL
   } else {
       preview.src = "";
   }
  }

   previewFile();  //calls the function named previewFile()
  </script>

Summary: upload image, store it(local storage), then grab it's absolute URL to paste it on another website to get the preview of that image.

I think you'll need a backend to store the image, unless you're only storing the url, in which case I'd look in html5 storage [w3 schools web storage](http://www.w3schools.com/html/html5_webstorage.asp) — Billy, Dec 31 '15 at 12:26
im not sure what im supposed to use, if i get the abs URL then im fine, but the image has to be stored, if it's locally i have to test if this works or not, still i need an answer — Adan, Dec 31 '15 at 12:35
What do you mean by storing the image in an html file? Do you want to store its base64 represenation inside the html? You need to clarify if you want the image to be stored in the back-end (send it to back-end and retrieve it again) or in the front-end, where only the current user can see it (web storage). Web storage is e.g. nice if you create a JavaScript image cropping page, where to user opens an image, crops it and wants to save it again on the local device. The back-end (your server) never sees that image. — ssc-hrep3, Dec 31 '15 at 12:53

score 2 · Answer 1 · edited May 23 '17 at 11:52

Part 1: Upload

Uploading files to PHP is easy. To give the option for an user, you must add a file input to the HTML form. Here's an example:

<input type="file" name="picture" />

To make sure PHP receives the file, you must set the form method to POST and enctype to multipart/form-data

<form action="receiver.php" method="POST" enctype="multipart/form-data">

If you want to upload through javascript you might want to use AJAX. Here's an post for an example: https://stackoverflow.com/a/6960586/3797667

Part 2: Receive (receiver.php)

The uploaded file can be accessed through $_FILES[]. Here's an example:

if(isset($_FILES['image'])){//Checks if file is set
  $errors= array();
  $file_name = $_FILES['image']['name'];
  $file_size =$_FILES['image']['size'];
  $file_tmp =$_FILES['image']['tmp_name'];
  $file_type=$_FILES['image']['type'];
  $file_ext=strtolower(end(explode('.',$_FILES['image']['name'])));
  //(above) checks file extension by getting text after last dot

  $expensions= array("jpeg","jpg","png");//supported file types

  if(in_array($file_ext,$expensions)=== false){//is the extension in the supported types
     $errors[]="extension not allowed, please choose a JPEG or PNG file.";
  }

  if($file_size > 2097152){//PHP only supports files under 2MB
     $errors[]='File size must be excately 2 MB';
  }

  //If there's no error moves files to folder "images" in the root of this file, else prints all the errors
  if(empty($errors)==true){
     move_uploaded_file($file_tmp,"images/".$file_name);
     echo "Success";
  }else{
     print_r($errors);
  }
}

For more methods on file management, check this link: http://php.net/manual/en/ref.filesystem.php

Part 3: Access

You might want to check this post if you want to get an URL for your file: PHP Dynamically get complete Absolute URL Path for specific file that will be included in other files

If you feel like you need more info, please comment below and I'll update the post. Good luck for your project!

Sources:

http://www.tutorialspoint.com/php/php_file_uploading.htm

`some-file.php` is an example name for the file containing the PHP code below, I'll update the answer to make it more clear. The image will be entered to the input (`type="file"`), and when the form is submitted it can be found in the `$_FILES` array. — Marlo Kuisma, Jan 01 '16 at 12:36
can you add comments on the php part? i want to know what every line of code does, or the important parts, if i understand the functionality i can learn/modify as i go, and thanks for the help i really appreciate it :D — Adan, Jan 01 '16 at 12:48

How do I add a simple image upload feature?

1 Answers1