I am adding a check to verify the size of the file imported in my web application. If the file size is greater than 4 MB i need to show a confirmation pop, whether a user is sure to upload the file. If user selects yes the default functionality occurs else upload is cancelled.
I am trying to open a confirmation pop up from server side using
Page.ClientScript.RegisterStartupScript(typeof(NewDocument), "ValidateFileSize", "<script>ValidateFileSize()</script>");
Where ValidateFileSize() is a JavaScript function that shows the confirmation box.
But the problem is, the control of the page at server side moves ahead before I set the result of the confirmation pop up using hidden variable and use it in 'if-else' condition. Therefore, i am unable to read the value of the hidden variable and skipping the uploading code at server side.
I am using the concept of hidden variable as in javascript element.files.size does not work in IE8.
Could anyone suggest a better approach or solution to this.
Or the only solution is using .aspx page as a popup?
first of all your question is not clear, i hope your requirement is to check file size at client side. but you question indicating that you are looking for how to open popup in javascript.
any way, when comes to your question,
once control goes to server side then file upload control will be refreshed, so better check file size completely in javascript instead of calling script method from server side.
below are some urls for you reference.
Get file size before uploading
JavaScript file upload size validation
Applying javascript to check file size and extension
You can use a literal control and set its html to script.
e.g.
<asp:Literal ID="LiteralText" runat="server" Text=""></asp:Literal>
and then from your server side set the Text property as below
if(FILE SIZE IS > 4MB)
{
LiteralText.Text = "<script>ValidateFileSize()</script>";
}
else{
//UPLOAD FILE LOGIC HERE
}
Related
Normally when you have a .PHP file and the client request it, the PHP code is run on the server and the HTML and JavaScript are sent to the client.
Question
Is it possible to have the server request a webpage (local) and run both the PHP code and the HTML with JavaScript on the server? I have created a single .html file that after 3 seconds of processing locally creates the image data for a thumbnail of the given video.
Why
I need to generate a thumbnail for a video. I used shared hosting and my hosting provider doesn't support for ffmpeg. You can, however, generate thumbnails using a canvas and JavaScript. I have already put a lot of pressure on the client. If this is possible, upload and download times would be significantly shorter than using the client.
Attempts
I've tried using file_get_contents(), but it doesn't run the code (Makes sense). Is there a way I could have it open and run for x seconds and then grab the contents?
I've tried using curl to get the file using this function here. I believe it is similar to my previous attempt in that it gets the file contents, but never executes them.
My final attempt was to use new DOMDocument(). I couldn't even get to loading the page though. First, I can't parse it with a video tag. It gives this error:
Warning: DOMDocument::load(): Specification mandates value for attribute controls in
file:\path\to\html\document.html, line: 53 in C:\path\to\php\document.php on line 50
If I were to remove the video tag (which is required), I get errors while parsing my JavaScript. So that attempt also did not work.
Is there a way that I could have PHP process the code (for something on the server) for x seconds before getting the contents? It would allow for time to generate the thumbnail data. If there is another way to do this without using ffmpeg on the server, that would be great.
So as I mentioned in comments, what I'm gonna explain is just an option (not the best one and just answering for your need of running html code!)
Where to do this?
Personally I rather to do this when the video is being uploaded by admin's browser and the best thing is that you can do this as a part of the posting procedure.
So in the page that you want this process to be done, put an invisible iframe like this.
<iframe id="myIframe" style="display: none;"></iframe>
How to begin the process?
I don't know the way you use to upload the videos (and it really is not that important!) but let's assume you want to use formdata. After the video is uploaded you need to know something unique to address the video (let's say an id). So after the video is uploaded, we can recive a code like id:20, initiateThumbnail:true as the result json data. Then we can simply use that hidden iframe to be the browser you've been asking for like this:
$("#myIframe").attr("src","dothething.php?video=20");
Now do what ever you wanted to do in it and change it's content after it's done. Now you need to wait for the result!
$('#myIframe').load(()=>{
let result = $("#myIframe").contents();
// checking result!
});
As you have already thought about, you can handle any errors by processing the result.
Notes
The event listener we used for iframe (iframe.load) fires when you initiate making the thumbnail as well. So be careful with the process of checking result (content of that iframe!)
If you don't use ajax or formdata, simply the action of your form is what I used as iframe.
One question? What happens if network connection goes down during this process? Simple answer! You can check in so many ways that the thumbnail exists or not. If not you can create it once that user requests for it in his browser and upload it back to server and save it for ever (as you did it in admin's panel!)
I think there isn’t another way to generate thumbnail on php server than with ffmpeg.
The only thing you can do, I suppose, is to force canvas generation on page load if you aren’t already doing it.
Anyway you are trying to do something wrong. Php doesn’t evaluate the html code, it’s just a preprocessor and not an interpreter like the browser. You can wait all the time of the world, but you’ll never get the content of the image that only a browser will generate.
<img class='preview' src='preview.png'>
This is an input for image upload:
<input type='file' class='img-upload' accept='image/*'>
When I clicked on the preview image(<img class='preview' src='preview.png'>), I have to change the value of the file input (<input type='file' class='img-upload' accept='image/*'>). The value of the file input should be the preview image.
Short answer: you cannot.
Long answer: The problem is that the file inputs are very sandbox'ed and will not allow user scripts to change their value. The goal is to make sure the user needs to click and acknowledge that he is sending a file from his computer.
Now, the user cannot send the image he clicked on mostly because it is not on his computer (well, technically yes, but even then he would need to know where it is stored and choose it by manually going over the folder). Another thing is, why would you want him to send over a file that you have served him? You could simply get the name of the file or an ID of any sort and use that internally.
Let's take the example of an user avatar. The user gets the possibility to pick between 10 different "preset" pictures, or to upload his own. What you'd do is have 2 form fields, one for the uploaded picture and one for the chosen preset. On server side you would see if the user uploaded a picture, and use that one. If not, use the picture he chose from your server.
I hope I got your question right...
EDIT: If you really, really, really needed to upload the displayed picture, you could get the image data (with ajax I guess), store it into a Blob and send it for upload.
But that has some serious drawbacks. And I think you'll be limited by crossdomain policies so basically you'll only be able to access files that your server can access directly...
Even if you got all that covered, it would be a painfully slow process for the user while all that is required is just sending the name of the picture and the server does the rest.
input type="file" can only be set by the user. Not by a script (not HTML, nor javascript, ...).
Every exe on a windows pc has the capacity to access your files. Including renaming, deleting, encrypting, ... them. For example that's what Wannacry (randsomware) does.
(similar for Mac and Linux, I guess)
A webbrowser is an executable, thus has all those capacities. For security reasons most of these features are turned off, on purpose.
Long ago I wrote a program in C++ (or C#, not sure), with Visual Studio. VS has a webbrowser component. The purpose was to upload multiple albums of photos to a website, but the exe on my pc did have the capacity to use a script to set the input type="file".
So my program could read all subfolders, find all images, automatically upload them, and then the php server saved the albums/images.
In order to stop people like you and me from doing these kind of things, real webbrowsers disabled all these abilities.
I want to write a browser add-on that automatically upload file on the page. So this will be done in pure Javascript.
This is what I have / know:
input#someId of the file upload input
File name and location in the computer
I am trying to "hardcode" in the console for now as a "Proof of Concept" but I cannot get it to work.
I have tried these two methods:
inputElement.click() as inputElement is the querySelector of that input.
Use initMouseEvent from what's the equivalent of jquery's 'trigger' method without jquery? but gave me error Uncaught TypeError: Cannot read property 'dispatchEvent' of null
So my questions are:
How to trigger click input of file upload element?
Better: how to process the upload completely? Basically pass the filename+location for upload to start (like when user clicks OK to open the file from the dialog)
UPDATE 1:
I was reading this http://www.thecssninja.com/javascript/fileapi
Maybe uploading file from File System is not possible. How about these alternatives:
We can grab a file from url (http)
The file is just image and in Javascript memory (base64)
Anyone of the above should be OK if they can be automatically upload and bypass the dialog box and search the file via local File System. I am thinking what if the image DOM or even canvas can be just dragged?
As people commented, you cannot do that. For security reasons, you have absolutely no access to programmatic fill an file input. Think about it, some dude could add a simple script to steal files from your computer and you wouldn't even know!
As far as I know, can't be done.
I am trying to capture some content of a div in html (both text and images) and I want to convert that to a doc file so that i can mail it. I am using html5 javascript and jQuery.
I have to convert it on the client side.
Here's your solution http://www.phpdocx.com/. You'll need a server side language to do that, the example uses PHP.
Since you have such strict requirements:
Email the user a link with a version of the report you want the user to see when they open the doc.
Tell the user to open MS Word, Click File, Open, Then paste the link in.
The user can then save it as a .doc file where ever they want.
Note: By the way this is the wrong answer, Although you've already turned it down, slash197's answer is the correct way to do this and the way i would normally suggest.
That or just email the report as html.
How can I check to see if a file is already open by another user in javascript? As it is right now, the program I'm trying to fix will open/edit a file then fail on trying to save if the file is already in use.
Also, is there an easy way to add a lock on the file so another process knows it's in use?
Edit: the program is a .hta using Active X Objects.
i guess i should have been more specific, here's some code about how it is opening/editing/saving the files.
var FileSystem = new ActiveXObject( "Scripting.FileSystemObject" );
var xmlDoc = new ActiveXObject( "Msxml2.DOMDocument.3.0" );
var fFile = FileSystem.GetFile( strPath );
xmlDoc.load( fFile.Path );
// some method's to edit documentElement in xmlDoc...
xmlDoc.save( fFile.Path );
Are you sure it's just JavaScript and not a combo of maybe an ActiveX or flash component? Is the file on the client or server? If server, this question makes more sense to me (ie. using some AJAX solution).
I'm not too familiar with ActiveX, but maybe when you open a file you could create a temporary file like file.ext.lock (and delete it when you save the file), so when another user tries to open the same file and sees the .lock file exists, you know it's being used.
You would probably need a server side locking feature. The javascript would call the server's 'save' script, which would return either a 'successful' status, or 'file locked'.
The simplest lock method that most programs use is creating another file with the same name but an extension such as '.lock'. A process checks if the file exists when opening the original, if so the file is in use and can only be opened as read only. If not, the lock file is created and the original can be edited.
will open/edit a file then fail on trying to save.
Javascript cannot open files or save them.
That may be your problem.
It could "edit" them - you can use JS to manipulate or edit an HTML page. [Even running a whole Rich Text Editor.]
But you then have to pass the page back to some other script to actually save those changes.
This is actually not true if you have Aptana or similar server side Javascript, or if it is being used [mozdev] to pass data to SQLite which can save its own data. If this is your case you should specify, as it is hardly typical Javascript usage.