In my application, I need to calculate the size of the file in client side (before uploading to server).
I want to restrict the file being uploaded if it doesn't satisfy my requirements like file size, file type..
Is it possible to achieve this in client side using JavaScript?
In the vast majority of current browsers, there is no way to accomplish this with pure JS. Some of the newer HTML5 file tools may allow for this, but their support is limited.
You will need to go with a Flash based uploader tool to get this data before upload. Check out YUI Uploader to get you started.
I would suggest you implement it this way:
Take whatever precautions on the server you can to limit the upload size (Each server technology handles it a bit differently). Always do this as client side controls can be bypassed
Use a standard File Upload input element to start
Progressively enhance it using something like the YUI Uploader or Uploadify. That way it works faster on files that do not match for users with Flash, but it also works for normal uploads since it will also be checked on the server.
This isn't practically possible ( maybe it is with some Java+ActiveX exploit in IE ) before actually submitting the file with a POST request to the server.
In browsers with support for HTML5´s File API, you now can.
This is true for updated browsers, not surprisingly IE excluded.
var files = $(this).attr('files');
var MAXFILESIZE = 500000; // bytes
if (files) {
// <input type="file" multiple>
for (var i = 0; i < files.length; i++) {
// We can also validate files[i].type or files[i].name vs an expected file type
if (files[i].size > MAXFILESIZE) {
alert('File "'+files[i].name+'" is too big.');
}
}
}
The future says "hello"! :)
Related
I've built a simple html page with javascript in a separate file, called on a button press.
I've opened the html file in chrome, and the path resembles: file:///home/tom/projects/index.html
The javascript needs to read a JSON file (file:///home/tom/projects/mydata.json) which is in the same directory, using a hardcoded path.
I'm really struggling to do this. As I understand, this is because I'm using client side js (meaning I can't use the fs library for example), which is limiting my options.
According to the question here, I can't load the file if I use the URL in the format: file:///home/to.... as it gives me the error:
Cross origin requests are only supported for protocol schemes: HTTP, data, chrome, chrome-extension, https.
If I start an HTTP-server, as the answer suggests, I can use server-side modules, but if possible I would like to avoid this.
I've noticed many answers that suggest using a dialog box like this:
var selectedFile = document.getElementById('input').files[0];
function readFile (file_path) {
var reader = new FileReader();
reader.readAsText(file_path);
console.log(reader.substring(0, 100));
};
but I can't make this work with a path in the form: file:///home/tom/projects/mydata.json
Is there a way to load a .json file from a file:///home/to.... format URL using client-side javascript, with a hardcoded path (ie not asking the user to select the file from a selection box)?
This is a deliberate security restriction, to stop a user from being given, and then opening, a HTML page which then tries to read their disk.
Run your page in a webserver (as that question suggested) then you can either load the JSON from a URL (e.g. something like http://localhost/projects/mydata.json) using JavaScript, or use a server-side language to fetch it and display it inside the rendered HTML. Either way will work, the first way is probably simpler and closest to what you've got now.
It's always far better to serve HTML pages from a HTTP server, the way it's intended to be.
I'm using UploadProcessor to block specific file uploading into MediaLibrary.
Everything is working good and I can see the alert Sitecore's message. But, Sitecore's error message is not really user-friendly "One or more files could not be uploaded. See the Log file for more details"
So, I'd like to add extra alert box for users. Below is my code, but the javascript is not working.
Some people want me to use "SheerResponse", but Sitecore Document mentions that
The uiUpload pipeline is run not as part of the Sheer event, but as part of the form loading process in response to a post back. This is because the uploaded files are only available during the “real” post back, and not during a Sheer UI event. In this sense, the uiUpload pipeline has not been designed to provide UI. In order to provide feedback to a User, the processor should resort to some trick which emits the JScript code.
http://sdn.sitecore.net/Articles/Media/Prevent%20Files%20from%20Uploading/Pipeline%20upload.aspx
Do you have any idea how to implement alert box??
The Upload control in the Media Library uses flash to upload the files. As part of this upload process, the file sizes are checked using JavaScript and a client side validation is made before the upload.
There are a number of changes you need to make. I'm just going to list them here, you can find all the code in my Github Gists:
https://gist.github.com/jammykam/54d6af46593fa3b827b4
1) Extend and update the MediaFolder.js file to check the file size against the Image Size ONLY if the extension is one specified in config
if (file.size > this.uploadLimit() || this.uploadImageLimitReached(file)) {
...
}
2) Update MediaFolder.xml page to include the above JS. Amend the codebeside, inheriting from Sitecore.Shell.Applications.Media.MediaFolder.MediaFolderForm and overriding OnLoad and OnFilesCancelled, to render restricted extensions and max image size settings so these are passed to the Javascript and display friendly alert.
settings.Add("uploadImageLimit", ((long)System.Math.Min(ImageSettings.MaxImageSizeInDatabase, Settings.Runtime.EffectiveMaxRequestLengthBytes)).ToString());
settings.Add("uploadImageRestrictedExtensions", ImageSettings.RestrictedImageExtensions);
3) Update Attach.xaml.xml codebeside to check image size, inheriting from Sitecore.Shell.Applications.FlashUpload.Attach.AttachPage and overriding OnQueued method:
if (ImageSettings.IsRestrictedExtension(filename) && num > maximumImageUploadSize)
{
string text = Translate.Text("The image \"{0}\" is too big to be uploaded.\n\nThe maximum image size that can be uploaded is {1}.", new object[] { filename, MainUtil.FormatSize(maximumImageUploadSize) });
this.WarningMessage = text;
SheerResponse.Alert(text, new string[0]);
}
else
{
base.OnQueued(filename, lengthString);
}
4) Add a config include with the new settings.
<setting name="Media.MaxImageSizeInDatabase" value="1MB" />
<setting name="Media.RestrictedImageExtensions" value=".jpg|.jpeg|.png|.gif|.bmp|.tiff" />
You can still (and should) keep the pipelines in place, but note from my previous answer I gave the "Restricted Extension" config setting has now changed (into a single setting instead of passing it into the pipeline). The Gist contains the
NOTE that I have tested this using Sitecore 7.2 rev 140526, so the base code is taken from there. If you are using a different version then you should check the base C#, JS and XML code matches what I have provided. The code is commented to show you what has changed.
The above works in the Content Editor, it does not work in the Page Editor! Which in Sitecore 7.2+ uses SPEAK dialogs and it looks like they use a different set of pipelines. That would need more investigation (raise another question, and specify which version of Sitecore you are using).
I'm working on a page that has streaming audio and many slides. The audio plays and the slides are loaded on demand during the event. Works fine during regular events but fails during large corporate events where the http download of a slide for 1000 users spikes the bandwidth and temporarily saturates the network causing the audio to skip / cut out.
I want to preload all the images upon the user opening the page but I was wondering if it is also possible to rate limit this download of all the images. I'd love to limit the preload of the images to a specific kb/s. Is this possible client side? If not what would be a good option server/client side?
Client side validation for limiting file size is possible in JavaScript using the File APIs.
An excellent tutorial is here : Reading files in JavaScript using the File APIs.
One final point : You should not rely on 'only' client-side validation. You must use server-side validation.
UPDATE: (For 'only' client-side validation):
With the use of JS, you can try like this:
if (typeof FileReader !== "undefined") {
var size = document.getElementById('myfile').files[0].size;
// check file size
}
(This may not be supported by all browsers.Only latest versions of Webkit browsers will support this.)
OR with the FILE API, you can try like this:
<input type="file" id="fileInput" />
var size = document.getElementById("fileInput").files[0].size;
I make multiple file uploading project, (Server language is PHP)
Especially, I need that before uploading, on client side, get files size in bytes.
what is today best cross browser solution/plugin for this?
I find SWFUpload, may be exists better solution? or use this SWFUpload?
In HTML5 a file drag & drop event creates a File object which has a .size property.
Look in ev.dataTransfer for the list of File objects.
My project requires me to add a "SaveAs PDF" feature. I was looking for a pure JavaScript solution which does this just in client end, however, was told that it's not implementable, at least for now.
jsPDF currently is still a limited version, not support graph and others. So now I am looking for a stable open-srouce free solution to set up a server web service, that receive data from client-end and send back the produced PDF file or a link for user to save to their disk.
The data from client is determined by client user, which means, not the whole page. User can choose to save a map, a table, or all of them into PDF file.
Any recommendations?
PS: in Windows environment
You might check out the ReportLab Toolkit - it includes an Open Source Python library for creating PDFs. (You didn't specify what server-side language you wanted, but Python is pretty widely supported.)
If you need something that can be coded in Javascript, one option might be PhantomJS. This tool allows you to run a headless Webkit browser from the command line, and among other things it can render and save webpages as PDFs. Slippy uses this approach, so you might be able to get example code from that project. Scripting the PDF creation would probably be much faster in PhantomJS than in Python, but it's likely to be much slower (it has to fire up a Webkit instance) and server installation might be complicated.
I've create this function in javascript which send on iframe to the server:
function download(url, datas){
if(url && datas){
var inputs = '', value,
iframe = '<iframe name="iframeDownload" id="iframeDownload" width=0 height=0></iframe>';
$(iframe).appendTo('body');
datas.forEach(function(data){
name = encodeURI(data.get('name'));
value = encodeURI(data.get('value'));
inputs+='<input name="'+name+'" value="'+value+'"/>';
});
$('<form action="'+url+'" method="post" target="iframeDownload">'+inputs+'</form>').appendTo('body').submit().remove(); // .appendTo and remove() are needed for firefox
$(iframe).remove();
};
};
I'm encoding the input name and value to be able to send data.
On my server, I'm using php, so to decode this, you need: rawurldecode. If you define the name of the inputs as "fileName" and "file" you can write this:
$fileName = rawurldecode($_POST['fileName']);
$file = rawurldecode($_POST['file']);
After than, to force the download, you need to send the corrects header. I'm using this function:
function download($filename, $file) {
header('Content-disposition: attachment; filename="'.$filename.'"');
header('Content-Type: application/force-download');
header('Content-Length: '. filesize($file));
readfile($file);
}
If you don't need to send the file from javascript because it's created on the server side, just add the path of your file to the download function.
If you're using PHP, You can use fpdf to generate the pdf.