I m currently uploading a file successfully. The issue is, the file is uploaded in a file storage folder and as all the files are stored there, there is a risk that a user may upload a file with the same name. What will happen is the file will get uploaded and automatically renamed however the file which the user has uploaded will not have the filename associated with that user. e.g User 1 has uploaded fileA.docx. User 2 has uploaded fileA.docx. fileA.docx for User 2 will be renamed to fileA(1).docx however the stored filename under User 2 will be fileA.docx. So when viewing the files, User 2 will be given fileA.docx which is for User 1.
To solve this issue, I want to rename the file when uploaded to a timestamp and then uplaod the file, and also associate the file with the user. e.g User 1 uploads fileB.docx. Upon submission, the file will be renamed to fileB2082017231.docx and then uploaded and the filename stored with the User 1 record.
Php Code (Where the upload is done)
<div class="form-group">
<label for="exampleInputFile">Evidence Upload</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Upload evidence here. Ensure filename does not have spaces</p>
</div>
Jquery file where the upload is carried out
var myFileList = document.getElementById('exampleInputFile').files;
// Grab the first File Object from the FileList
var myFile = myFileList[0];
if(!(myFile==null))
{
// Set some variables containing the three attributes of the file
var myFileName = myFile.name;
var myFileSize = myFile.size;
var myFileType = myFile.type;
switch(myFileType)
{
case 'image/jpeg':
var extension = 'jpg';
break;
case 'image/png':
var extension = 'png';
break;
case 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet':
var extension = '.xlsx';
break;
case 'application/vnd.openxmlformats-officedocument.wordprocessingml.document':
var extension = '.docx';
break;
case 'application/pdf':
var extension = '.pdf';
}
// Let's upload the complete file object
uploadFile(myFile);
function uploadFile(myFileObject) {
// Open Our formData Object
var formData = new FormData();
// Append our file to the formData object
// Notice the first argument "file" and keep it in mind
formData.append('my_uploaded_file', myFileObject);
// Create our XMLHttpRequest Object
var xhr = new XMLHttpRequest();
// Open our connection using the POST method
xhr.open("POST", '../dbfiles/upload.php');
// Send the file
xhr.send(formData);}
Upload.php
<?php
if ( 0 < $_FILES['my_uploaded_file']['error'] )
{
echo 'Error: ' . $_FILES['my_uploaded_file']['error'] . '<br>';
}
else {
move_uploaded_file($_FILES['my_uploaded_file']['tmp_name'],
'../uploads/' . $_FILES['my_uploaded_file']['name']);
}
move_uploaded_file(
// this is where the file is temporarily stored on the server when uploaded
// do not change this
$_FILES['my_uploaded_file']['tmp_name'],
// this is where you want to put the file and what you want to name it
// in this case we are putting in a directory called "uploads"
// and giving it the original filename
'uploads/' . $_FILES['my_uploaded_file']['name']
);
?>
The variables
var myFileName = myFile.name;
var myFileSize = myFile.size;
var myFileType = myFile.type;
is used to store the details in the Mysql db for associated to a particular file name. My question is, how do I rename the file in the fileobject based on my current code above.
Other issues with this code 1. When file is uploaded with spaces in the filename, only the first name before the white space is stored in the db, and thus the file is lost. Would appreciate it if a solution for this is also given.
