Develop Reference

$_FILES['file'] turn null while using filepond

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

How do I go about displaying the values submitted using the post method In the HTML file which the form was submitted to?

I'm using the post method to submit a form to another HTML file I specified with action = " ", but once it redirects me to my second HTML file how can I display the data it received? Using JavaScript.

Setup a node.js server and read the values that have been posted. HTML itself does not receive data per se, but you can generate HTML server side with what you read.

It looks like nearly impossible to read POST from client-side [javascript]
Have a look at this : how to read the post request parameters using javascript!

You can make a GET request and parse the query string parameters at requested HTML document.
HTML
<form action="post.html" method="GET">
<input name="a" value="1" />
<input name="file" type="file"/>
<input type="submit" />
</form>
JavaScript at HTML document where <form> is submitted
const form = document.forms[0];
form.onsubmit = e => {
e.preventDefault();
// convert `File` object to `data URI`
if (form.file.files.length) {
console.log(form.file.files);
const reader = new FileReader;
reader.onload = () => {
form.file.type = "text";
form.file.value = reader.result;
form.submit()
}
reader.readAsDataURL(form.file.files[0]);
}
}
at HTML document requested by <form> GET request
// get query string parameters as array of key, value pairs
// do stuff with form data
const formData = [...new URLSearchParams(location.search).entries()];
plnkr http://plnkr.co/edit/eP8GvUTc4xkPmuc4T8Pu?p=preview

Upload file having special character in name using Angular ngf-select

I am working on Angular2 application with spring boot in back-end. In application there is feature to upload file on server. The code to upload file working fine.
I am using ngf-select to choose file. It works well when file name is without special characters.
<input type="file" name="file" ng-model="obj.fileModel" ngf-select accept="file_extension">
The problem occurs when I choose file having special character like my name neelam shrma ## !! %%% ggg %.json
Upload js code is :
var formData = new FormData();
formData.append("fileObj", obj.fileModel);
UploadFile.save(formData, onUploadSuccess, onUploadError);
As file obj.fileModel having File object with special character name, so it do not call resource method to upload file
Also I have tried by updating the file name withe encoding, but as file object is read-only, so won't allowing me to change the name, also created new file object with encoded file name, but didn't worked.
Resource Method :
public boolean uploadMyFile(MultipartFile mpfile) throws IOException {
...
....
File file = new File(myFolder + File.separator + file.getOriginalFilename());
mpfile.transferTo(file);
......
......
}
So the file having special character not calling my resource method : uploadMyFile(..) and throwing 500 server error.
How to resolve the issue of uploading file having special character using angularJs ngf-select?

Add a filter as below
.filter('decodeURL', function () {
return function (text) {
if (text) {
return window.encodeURIComponent(text);
}
}
});
and below html
<img src="{{itemDetails.LargeImageName | decodeURL}}" />

How to auto attach the file to input file type field from DB

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

Store image on server with html/javascript/mongodb

I want to upload an image from a user to the server. With the all path, it works (I can store on MongoDB). But with <input id ='image_upload' type='file' name='image_upload' />, it doesn't works (security, no full path)
So I want to know if there is an other way to do that. Maybe asolution where I store directly on the server will be ok (Using javascript, html, ajax, ... )
Thank you

You can use form data as such:
https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects
Paticularly,
var formData = new FormData();
// HTML file input, chosen by user
formData.append("userfile", fileInputElement.files[0]);