How to identify uploading item is folder while doing drag and drop - javascript

I am using file upload functionality using drag and upload .I want to identify uploading item is folder.Is there any possible way to identify uploading item is folder for IE browser in javascript.

You need to use the (pretty experimental) directory API:
https://developer.microsoft.com/en-us/microsoft-edge/platform/documentation/dev-guide/html5/folder-upload/
Basically, you need to check:
event.dataTransfer.items[0].webkitGetAsEntry().isDirectory
// ↑ You may need a loop here

Related

Is it possible to exclude hidden files when uploading a directory?

When a user selects a directory from which to upload all documents, it might contain hidden files created by windows like thumbs.db
Is there any way of detecting, either on the front end or back end, whether a particular file was hidden?
Currently handling files uploads with bootstrap-vue and typescript
<b-form-file id="documentFolder"
accept="allowedFileTypes"
style="display:none;"
#change="handleFolderSelected"
:directory="true" />
handleFolderSelected(files: Array<File>) {
// build form data - post files
}
I assume its just using a regular file input, but can't see anything useful there either
I'm recieving the files as IFormFiles using .net-5.0
Is this possible at all, or do I need to simply inform the user that they should remove all hidden files?

How can I upload a single file using ngx-dropzone in Angular?

I'm using ngx-dropzone in Angular to upload a profile picture with drop zone, but I want the user to upload only one file instead of multiple. Is there a way using ngx-dropzone?
Here you can see the demo:
https://stackblitz.com/edit/ngx-dropzone
You could just disable multiple files upload. Like code below.
<ngx-dropzone [multiple]="false" (change)="onSelect($event)"></ngx-dropzone>

Fineuploader : how to replace uploaded images?

I'm using fine uploader to upload images. After I upload an image, I need to be able to upload another image to replace the uploaded image before and only allow one image at one time. Is there any options for that or should I delete the upladed image before I start uploading the new one?
This is what I would do:
Set the multiple configuration option to false. This will be most helpful if you are using the UI built into the Fine Uploader library (and not a custom UI or React Fine Uploader. In that case, after a file has been submitted, subsequent files will "replace" that initial file in the UI.
Remove/replace the item on your server when handling the upload request if a file for that user already exists.
This is making a lot of assumptions as you have provided very little information about your situation or setup. This should get you started down the right path though.
End up deleting the uploaded images before uploading a new one:
onValidate: function() {
this.deleteFile(avatar_id);
}

Save file generated by canvas.toDataURL()

I made some png using canvas.toDataURL().
I want to save it to folder that have some png using download dialog.
But I don't know how to make folder and to use download dialog.
Please advise me.
Pretty sure there's no way to create an arbitrary folder on your client's computer. It seems to me like that would be a massive security problem.
If you want to create a link to download a file, just use the download attribute on your a tag.
<a href="data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAAXNSR0IArs4
c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAABoSU
RBVDhPvYxLFoAwCAN7/0sjJRFCW135nIWSX4d1xgaDm6b32FlMinjr0Aaa1
gDHE21QIsAN1MFR2pniw4ED2Rrv/D+g3sh0fvMCUWgw0EEKEDVCSwo10HhB
01bSABwc/gWUAK3E7AJgQR/9VKyAfgAAAABJRU5ErkJggg=="
download="myimage.png">Download this image</a>.

check if folder exists in the root jquery

I'm trying to load an image to a div background using the following file structure in the root.
WebContent --
|
zharaimages --
|
[ItemID] --
|
Image.jpg
This is done by jQuery and the file structure is inside the root. The ItemID folder is dynamic and I have to check whether the path exists using jQuery and if the path is not valid, I should go to a default path to fetch the default image. How can I check the path is valid using jQuery. I'm hoping to this can be done without an ajax call.
Can any one help me on a tutorial or an API I can use for this!
UPDATE
The files are on the server. The concept I have is that I have 100s of item elements & I want to load an image for each item element. The images are saved in the server ( a local host ) and the folder hierarchy is divided using the item ID as shown. What I want to do is check whether the image file exists before appending it to the background of the item element div. Is this possible. This is a web application developed using spring.
In simple way you cannot. It is because JavaScript cannot access folders on server side. The only way you could try to check is to invoke $.get in which you pass url to image and handle error if image does not exist. You cannot try to get only folder because if folder listing is disabled you will always get error
you can bind error handler on your image tag, and if error receive you can load your default image.
$('#imgElementID').error(function() {
$(this).attr('src', 'images/DEFAULT.JPG');
});
without hitting URL you cannot get to know if image exist or not

Categories