This is the ordinary input file with HTML in the form with method POST
<input type="file" name="file" accept="image/png, image/jpeg">
then Ill get that file input with this function written in PHP
function Upload() {
$namefile = $_FILES['file']['name'];
$error = $_FILES['file']['error'];
$tmpName = $_FILES['file']['tmp_name'];
move_uploaded_file($tmpName, 'upload/'.$namefile);
return $namafile;
}
Ya that's success. The file move to folder 'upload'.
But I want to try styling my form input with Filepond.
<input class="filepond" type="file" name="file" accept="image/png, image/jpeg">
With this js
const inputElement = document.querySelector(".filepond");
FilePond.registerPlugin(
FilePondPluginFileValidateType,
FilePondPluginFileValidateSize
)
FilePond.create(inputElement, {
labelIdle: 'Upload Photo<span class="filepond--label-action">Browse</span>',
maxFiles: '1',
maxFileSize: '5MB',
labelMaxFileSizeExceeded: 'Too big bro.',
labelMaxFileSize: 'max {filesize}',
labelFileTypeNotAllowed: 'Meh dont up that type',
fileValidateTypeLabelExpectedTypes: 'just {allTypes}'
})
But when I try to get the file with the same method as before, $_FILES['file'] will just turn null.
Instead of styling your input, filepond may be creating a proxy element with a different name.
Try var_dump($_FILES) and see if it has been named something else.
As browsers cannot update the file input field value the file is stored in a separate field.
This means you either have to encode the file as a base64 string and then upload that with the form submit (and then decode on the server).
Or you have to upload the file asynchronously by setting the FilePond server property to a page on the server that handles the upload.
A third alternative is setting the storeAsFile property to true, FilePond will now update the file input field, but this only works if the browser supports the DataTransfer constructor
Related
I am using php file attachment to upload file. In DB i am getting the file name with the extension of the file and storing it into DB.
There is the modify button which will fetch all the entries from the DB and display on the screen. There is one text field, and one file type field.
Now the problem is I am not able to set the file to the file type field, so please help me in this.
Thanks in Advance.
since you havent provided any code sample, it hard to pinpoint what issue your having , but my guess is your looking for something like this
<input type="file" id="file" name="file"/>
<button ng-click="add()">Add</button>
and the to get file content use the below code
$scope.add = function(){
var f = document.getElementById('file').files[0],
r = new FileReader();
r.onloadend = function(e){
var data = e.target.result;
//send your binary data via $http or $resource or do anything else with it
}
r.readAsBinaryString(f);
}
for more info check this link enter link description here
First , i am a french web developer ( sorry for my poor english )
i 'am looking for a bootstrap php image upload with thumbnail.
i would like to make an upload image file like :
[http://www.2ememain.be/inserer/][1]
the Krajee plugin ([http://plugins.krajee.com/file-input][2]) seems to be the one i am looking for..
But i have some problems with the upload..
i get the error message:
item1.png: SyntaxError: Unexpected token e
my form:
<input id="input-700" name="kartik-input-700" type="file" multiple=true class="file-loading">
js:
$("#input-700").fileinput({
uploadUrl: "upload.php",
uploadAsync: true,
maxFileCount: 10});
upload.php:
echo "test";
if (empty($_FILES['input-700'])) {
echo json_encode(['error'=>'No files found for upload.']);
return;
}
// get the files posted
$images = $_FILES['input-700'];
var_dump($images);
More strange:
when i delete echo(test);
i get the error:
No files found for upload
Thanks for your support
if you have another solution , i shall be glad to get it..
Since you have set the uploadUrl parameter you are using the ajax uploads feature (instead of native HTML form submission).
You need to ensure that you return a proper JSON encoded data response from the server action (as set in uploadUrl) else the plugin fails. You can read the plugin documentation for ajax uploads where this is highlighted. For example, even if you do not have any data to send - you can send a empty JSON string like {}.
I'm trying to use dropzone.js to add an easy drag-and-drop interface for a user to upload up to 10 photos to my server (currently WAMP). I'm using PHP 5.4 on the back end.
Following this tutorial I got the system working enough to upload acceptable file types to an 'Uploads' folder in my root directory, but I'm stuck on how to make the photos instead upload to a unique directory for each user.
By the time the user gets to my photo upload page, they've already created a folder on my server with a unique name, the path to which has been stored in $_SESSION['requestedDirectory'].
Here is the code used to display the Dropzone form:
<form action="<?php echo BASE_URL; ?>photo_uploads.php" class="dropzone" id="photoUploadDropzone"></form>
<script type="text/javascript">
Dropzone.options.photoUploadDropzone = {
paramName: "file",
maxFilesize: 5, // MB
maxFiles: 10,
addRemoveLinks: true,
acceptedFiles: "image/jpeg, image/jpg, image/png, image/gif",
accept: function(file, done) {
done();
}
};
</script>
As you can see, it sends the data to a file called photo_uploads.php, which has the following code:
if (!empty($_FILES)) {
$tempFile = $_FILES['file']['tmp_name'];
$targetPath = $_SESSION['requestedDirectory']; <--HERE'S THE PROBLEM LINE
$targetFile = $targetPath. $_FILES['file']['name'];
move_uploaded_file($tempFile,$targetFile);
}
As mentioned in the comment above, this file doesn't seem to be able to take data out of a session variable, but I'm not sure why. If I change that line to give the full directory (eg $targetPath = 'C://wamp/www/shops/foldername';) it works fine, but then of course I can't change that foldername dynamically based on which user is using the form.
So to clarify, I'd like to know how to upload the file to the path stored in Session?
UPDATE: Solved.
For anyone else with the same problem in future, this is what I changed the form to:
<form action="<?php echo BASE_URL; ?>photo_uploads.php?folder=<?php echo $_SESSION['photosDir']; ?>" class="dropzone" id="photoUploadDropzone"></form>
Like Rizwan suggested, by passing the $_SESSION['photosDir'] value in a GET variable it was accessible after the form posted.
The other change I made was to photo_uploads.php, just to the following line:
$targetPath = $_GET['folder'];
Absolutely no idea why the value wasn't available directly from Session in the first place - I've never heard of Session values going out of scope - but happy to have this problem solved.
You can pass the requestedDirectory as a query string with the form's action attribute. In that way it can be accessible.
I appended blob data (that I converted from urldata) to a form. The code I use is as follows:
var blob = dataURItoBlob(row.pict);
var fd = new FormData(document.forms[0]);
fd.append("uploadFile", blob);
I intend to set the blob as the selected file for an input with type file:
<input type="file" name="uploadFile" id="btn_pic" />
But when I click the submit button, server does not recognize the file I want to upload. The server reads the parameter as null (I am using ASP .NET MVC3). I use The code below in the server-side:
public ActionResult Create(Discussion d, HttpPostedFileBase uploadFile)
{
....
}
is there any way I can do to set the selected file using javascript?
I am creating mail page for sending mails. I need to attach some file before sending. How could I do this using AJAX? Initially I need to store those files in server and then I have to send the mail. These actions are done with in a single send button.
Check these questions:
JavaScript file uploads
How can I get Gmail-like file uploads for my web app?
What is the best multiple file JavaScript / Flash file uploader?
Look on below snippet which send text data and attached multi-files. The content-type='multipart/form-data' is set by browser automatically, the file name is added automatically too to filename FormData parameter (and can be easy read by server).
async function sendEmail() {
let formData = new FormData();
let msg = { message: emailText.value };
formData.append("email", JSON.stringify(msg));
[...attachment.files].map( (file,i) => formData.append("file"+i, file) );
try {
await fetch('your/api/upload/email', { method: "POST", body: formData });
alert("Email was send!");
} catch(e) {
alert("Problem with email sending");
}
}
<textarea id="emailText" placeholder="Type message here"></textarea><br>
<input type="file" id="attachment" multiple /><br><br>
<input type="button" value="Send email" onclick="sendEmail()" />
<br><br><span style="color:red">In this snippet API not exists so exception will be thrown but you can look on your request in:<br> chrome console> network tab</span>
I hope you know how do the normal upload. Call the upload/Reading and updating the file when click the button by using the ajax call. You have to send the local system file path as the input and then the response should contain the path in the server or error. Update the attachment link with the response in case there are no errors.
You should dynamically create a hidden iframe in your DOM and set the target of your upload form to this iframe. dont forget to set form method to POST.
you could do both uploading and message field filling in one go.
you should definitely check ready components doing this for the javascript library of your choice.