Develop Reference

How do you upload a picture to the database taken from a smartphone's camera with php?

My website allows users to upload images. The upload functionality works perfectly, as long as there is a file to choose. However, when I access my website on my iPhone, and try to upload a photo, I'm given choices of choosing a file, or taking a photo with the iPhone camera. When I choose the option of taking a photo, my website crashes. Can someone help me with this?
Here's the input code:
<input id="uploadStatus" type="file" name="photo" accept="image/*" onchange="loadFileStatus(event)" hidden>
And here's the javascript code:
reader.onload = function(){
var output = document.getElementById('outputstatus');
output.src = reader.result;
};
reader.readAsDataURL(event.target.files[0]);
}; ```
Thank you in advance.

How to display preview of files after choose file?

I have upload documents button, from where I can upload images, docs, pdf files and excels. I want to display preview of these selected files.
I am able to display preview of images and PDF files, but not getting how to display preview if file is doc or excel file.
Here is my generic code for displaying preview of a file.
HTML Code is:
<input type="file" name="medical_doc" multiple="multiple" onchange="PreviewDocument('wildlife');" id="preview_animal_doc_wildlife">
JS Code is:
function PreviewDocument(type) {
var outerDiv = document.createElement("DIV");
outerDiv.setAttribute("class", 'col-md-2 document-col');
outerDiv.setAttribute("id", 'append_animal_doc_preview_div');
var outerImage = document.createElement("EMBED");
outerImage.setAttribute("class", 'img-doc');
outerImage.setAttribute("src", e.target.result);
outerDiv.appendChild(outerImage);
}
This code works fine if chosen file is PDF and/or Image, but not working for doc or excel files. Any idea of how to display preview of doc and excel files?

function ReadURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$('#imgFile').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$(document).ready(function(){
$("#imgInp").change(function() {
ReadURL(this);
});});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1" runat="server">
<input type='file' id="imgInp" />
<img id="imgFile" src="#" alt="your image" />
</form>
you are not able to show excel and doc file because browser is not supporting that file preview for that purpose you need extra third party control to render that file in to your browser. without data it is not possible.

If your file was excel you can read it as JSON as here
then choose apart from JSON and show it in table
and if it was doc when you read it with FIleReader() which is builtin javascript
as readAsDataURL the e.target.result will be a string so choose like the first 5 lines and show it in a div.

Submitting Video files in Angular js

I need help in submitting a video file using AngularJS (in an Ionic App) to a PHP server. The code works for images but not videos. A quick hint, I think the name of the file is been sent to the server but when I tried getting the size it shows 0, which means the actual file wasn't sent.
Index.php
<div class="list">
<label>Video clip (for peculiar cases)</label>
<label class="item item-input item-stacked-label">
<input type="file" ng-model="image34" name="image34" id="image34" placeholder="" onchange="angular.element(this).scope().uploadedFile34(this)" valid-file >
</label>
on select the uploadedFile34 function is triggered. see the code below
$scope.uploadedFile34=function(element)
{
$scope.currentFile34= element.files[0];
var reader = new FileReader();
reader.onload = function(event){
$scope.image_source = event.target.result
$scope.$apply(function($scope){
$scope.files34 = element.files;
});
}
reader.readAsDataURL(element.files[0]);
on submitting the form I get the file this way
$scope.image34=$scope.files34[0];
formData.append("image34", $scope.image34);
Using form data which works perfectly for images but not for videos. Please I really need help on this, all efforts to get this done has not helped. Still getting my head round angularjs.

How do I add a simple image upload feature?

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.

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

How to show the image uploaded using HTML file control on a new page after form submission in PHP?

I've a form which contains following file upload control and image control:
<form action="rebate_preview.php" role="form" method="post" enctype="multipart/form-data">
<input type="hidden" name="hidden_path" id="hidden_path" value="">
<input type="file" name="rebate_image" id="rebate_image">
<img id="rebate_old_image" src="#" alt="your image" width="80" height="80"/>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
Here I'm enabling the user to see the preview of the image he selected for upload without actually uploading the image to server using following jQuery code :
$(document).ready(function() {
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#rebate_old_image').attr('src', e.target.result);
$('#hidden_path').val(e.target.result)
}
reader.readAsDataURL(input.files[0]);
}
}
$("#rebate_image").change(function(){
readURL(this);
});
});
Now the problems I'm facing is I'm not able to show the same image preview on the next page i.e. on a file "rebate_preview.php" after form submission using image control. The next issue I'm facing is how should I store the values from array $_FILES on the page rebate_preview.php?
Remember still the image uploaded by user is not yet uploaded to the server.
The page rebate_preview.php is just a preview page with some other fields to preview the details.
How should I show this image on the page rebate_preview.php using image control and how should I store the $_FILES array data?

I had this problem a short while back when I was building an application, the best thing to create an OBJECT URL from the selected image when you select the file, you can then set your img src to that OBJECT URL data, which will render it to the page, for example lets say you have a file input with the id image_file. you could do this:
// Preview the image on the page
$('#image_file').change(function(e) {
var selected_file = $('#image_file').get(0).files[0];
selected_file = window.URL.createObjectURL(selected_file);
$('#preview_image').attr('src' , selected_file);
});
The source is now the BLOB representation of the image, you can then submit your form to upload the image or select another image to update the preview, hope this helps :)

Simple Solution?
in PHP script just do:
print "<img src='".$_POST['hidden_path']."'>";