Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #16931 > unrolled thread

How to validate a file in a javascript

Back to article view | Back to comp.lang.javascript

Contents

  How to validate a file in a javascript Katja <kate.kokatjuhha@gmail.com> - 2012-10-28 11:56 -0700
    Re: How to validate a file in jquery Denis McMahon <denismfmcmahon@gmail.com> - 2012-10-28 21:11 +0000
    Re: How to validate a file in a javascript Cezary Tomczyk <cezary.tomczyk@gmail.com> - 2012-10-28 22:38 +0100
      Re: How to validate a file in a javascript Katja <kate.kokatjuhha@gmail.com> - 2012-10-28 23:32 -0700
        Re: How to validate a file in a javascript Denis McMahon <denismfmcmahon@gmail.com> - 2012-10-29 08:57 +0000
          Re: How to validate a file in a javascript Cezary Tomczyk <cezary.tomczyk@gmail.com> - 2012-10-29 15:20 +0100
            Re: How to validate a file in a javascript Denis McMahon <denismfmcmahon@gmail.com> - 2012-10-29 23:22 +0000
              Re: How to validate a file in a javascript Jeff North <jnorthau@yahoo.com.au> - 2012-10-30 17:11 +1100
                Re: How to validate a file in a javascript Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2012-11-01 21:51 +0100
          Re: How to validate a file in a javascript Dr J R Stockton <reply1244@merlyn.demon.co.uk.invalid> - 2012-10-30 19:47 +0000

#16931 — How to validate a file in a javascript

I am trying to show the errors that can occur by uploading a file (file extension, size).
I am using [an adapted version of Jquery Fiel Upload for Ruby on Rails][1]

I need to validate a file (ending of a file,  size of the file) before uploading and as nobody has an idea [how to do it with JSON][2] I want to ask if somebody knows how to do it in a following javascript:

    <script type="text/javascript" charset="utf-8">
              $(function () {
                  // Initialize the jQuery File Upload widget:
                  $('#fileupload').fileupload();
                  // 
                  // Load existing files:
                  $.getJSON($('#fileupload').prop('action'), function (files) {
                    var fu = $('#fileupload').data('fileupload'), 
                      template;
                    fu._adjustMaxNumberOfFiles(-files.length);
                    console.log(files);
                    template = fu._renderDownload(files)
                      .appendTo($('#fileupload .files'));
                    // Force reflow:
                    fu._reflow = fu._transition && template.length &&
                      template[0].offsetWidth;
                    template.addClass('in');
                    $('#loading').remove();
                  });
            
              });
        </script>

<br>
<br>
I am thinking of something like this (the code downstairs) but I need to rewrite the above code to present validation line `types = /(\.|\/)(gif|jpe?g|png)$/i` and to have a error-message  `alert("#{file.name} is not a gif, jpeg, or png image file")` . As I am not god at writing javascripts I am asking for help.
<br>
<br>

    jQuery ->
      $('#new_painting').fileupload
        dataType: "script"
        add: (e, data) ->
          types = /(\.|\/)(gif|jpe?g|png)$/i
          file = data.files[0]
          if types.test(file.type) || types.test(file.name)
            data.context = $(tmpl("template-upload", file))
            $('#new_painting').append(data.context)
            data.submit()
          else
            alert("#{file.name} is not a gif, jpeg, or png image file")
        progress: (e, data) ->
          if data.context
            progress = parseInt(data.loaded / data.total * 100, 10)
            data.context.find('.bar').css('width', progress + '%')



  [1]: https://github.com/tors/jquery-fileupload-rails-paperclip-example
  [2]: http://stackoverflow.com/questions/13109333/how-can-i-associate-error-messages-to-the-error-key-in-json-response

[toc] | [next] | [standalone]

#16937 — Re: How to validate a file in jquery

On Sun, 28 Oct 2012 11:56:56 -0700, Katja wrote:

> I am trying to show the errors that can occur by uploading a file (file
> extension, size).
> I am using [an adapted version of Jquery Fiel Upload for Ruby on
> Rails][1]

I corrected your subject line for you.

However, I would suggest you seek a jquery oriented forum, rather than 
this one, jquery is not generally a topic of discussion here.

Rgds

Denis McMahon

[toc] | [prev] | [next] | [standalone]

#16938

W dniu 2012-10-28 19:56, Katja pisze:
> I am trying to show the errors that can occur by uploading a file
> (file extension, size). I am using [an adapted version of Jquery Fiel
> Upload for Ruby on Rails][1]
>
> I need to validate a file (ending of a file,  size of the file)
> before uploading and as nobody has an idea [how to do it with
> JSON][2] I want to ask if somebody knows how to do it in a following
> javascript:
[...]

I wouldn't trust on file extensions. As a just a warning for user then
it is ok. Just my "5 cents".

-- 
Cezary Tomczyk
http://www.ctomczyk.pl/

[toc] | [prev] | [next] | [standalone]

#16941

> I wouldn't trust on file extensions. As a just a warning for user then
> 
> it is ok. Just my "5 cents".
> 
I know but I still need it =)

[toc] | [prev] | [next] | [standalone]

#16943

On Sun, 28 Oct 2012 23:32:33 -0700, Katja wrote:

>> I wouldn't trust on file extensions. As a just a warning for user then
>> 
>> it is ok. Just my "5 cents".
>> 
> I know but I still need it =)

Javascript has no direct access to the filesystem. Thus, it can not 
reliably determine the size of a file. At best, you can do (sub)string 
comparisons and regex checks against a file name entered into a form 
field.

You can also use the accept attribute in html to constrain the mime type 
of the uploaded file eg:

<input type="file" accept="image/png,image/gif,image/jpeg" name="blah"( /
)>

Rgds

Denis McMahon

[toc] | [prev] | [next] | [standalone]

#16947

W dniu 2012-10-29 09:57, Denis McMahon pisze:
> On Sun, 28 Oct 2012 23:32:33 -0700, Katja wrote:
>
>>> I wouldn't trust on file extensions. As a just a warning for user then
>>>
>>> it is ok. Just my "5 cents".
>>>
>> I know but I still need it =)
>
> Javascript has no direct access to the filesystem. Thus, it can not
> reliably determine the size of a file. At best, you can do (sub)string
> comparisons and regex checks against a file name entered into a form
> field.

Not really. There is some possibilities. See:
https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications

There is "but". File API must be implemented in browser.

-- 
Cezary Tomczyk
http://www.ctomczyk.pl/

[toc] | [prev] | [next] | [standalone]

#16948

On Mon, 29 Oct 2012 15:20:33 +0100, Cezary Tomczyk wrote:

> W dniu 2012-10-29 09:57, Denis McMahon pisze:
>> On Sun, 28 Oct 2012 23:32:33 -0700, Katja wrote:
>>
>>>> I wouldn't trust on file extensions. As a just a warning for user
>>>> then
>>>>
>>>> it is ok. Just my "5 cents".
>>>>
>>> I know but I still need it =)
>>
>> Javascript has no direct access to the filesystem. Thus, it can not
>> reliably determine the size of a file. At best, you can do (sub)string
>> comparisons and regex checks against a file name entered into a form
>> field.
> 
> Not really. There is some possibilities. See:
> https://developer.mozilla.org/en-US/docs/
Using_files_from_web_applications
> 
> There is "but". File API must be implemented in browser.

I think it would be presumptuous for any javascript programmer to assume 
that he was going to have any access to the client filesystem unless he 
controlled the client. But I'll just knock up a page that will look in 
all your files when you visit my server ....

Even if the file api is implemented in the browser, any intelligent 
browser is going to provide a means to control its exposure to the web, 
and any sensible and security conscious user is going to lock it down as 
tightly as they can.

Rgds

Denis McMahon

[toc] | [prev] | [next] | [standalone]

#16954

On Mon, 29 Oct 2012 23:22:26 +0000 (UTC), in comp.lang.javascript
Denis McMahon <denismfmcmahon@gmail.com>
<k6n33i$938$2@dont-email.me> wrote:

>| On Mon, 29 Oct 2012 15:20:33 +0100, Cezary Tomczyk wrote:
>| 
>| > W dniu 2012-10-29 09:57, Denis McMahon pisze:
>| >> On Sun, 28 Oct 2012 23:32:33 -0700, Katja wrote:
>| >>
>| >>>> I wouldn't trust on file extensions. As a just a warning for user
>| >>>> then
>| >>>>
>| >>>> it is ok. Just my "5 cents".
>| >>>>
>| >>> I know but I still need it =)
>| >>
>| >> Javascript has no direct access to the filesystem. Thus, it can not
>| >> reliably determine the size of a file. At best, you can do (sub)string
>| >> comparisons and regex checks against a file name entered into a form
>| >> field.
>| > 
>| > Not really. There is some possibilities. See:
>| > https://developer.mozilla.org/en-US/docs/
>| Using_files_from_web_applications
>| > 
>| > There is "but". File API must be implemented in browser.
>| 
>| I think it would be presumptuous for any javascript programmer to assume 
>| that he was going to have any access to the client filesystem unless he 
>| controlled the client. But I'll just knock up a page that will look in 
>| all your files when you visit my server ....
>| 
>| Even if the file api is implemented in the browser, any intelligent 
>| browser is going to provide a means to control its exposure to the web, 
>| and any sensible and security conscious user is going to lock it down as 
>| tightly as they can.
>| 
>| Rgds
>| 
>| Denis McMahon

Denis,
you are 100% correct with regards to the browser accessing the
visitors files but I think that the OP was looking for a way to
process the visitors selected files via the <input type=file ..>
control.

A couple of years ago I too wanted to validate the filetype the
visitor had selected before sending everything to the server. I
couldn't even access the filename because of security restrictions.

It seems these days this restriction has been relaxed. I checked out
https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications#Example.3A_Showing_file%28s%29_size
This works in FF 16, Opera 12, sort of in works in Chrome 22, hardly
works in Safari 5 and doesn't work in IE 9.

Also check out the WHATWG description of type=file -
http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#file-upload-state-%28type=file%29

So while there are some restrictions that have been lifted there is no
standard implementation of the new rules. So I guess it is back to
validating the file server-side.

Cheers

[toc] | [prev] | [next] | [standalone]

#17004

Jeff North wrote:

> A couple of years ago I too wanted to validate the filetype the
> visitor had selected before sending everything to the server. I
> couldn't even access the filename because of security restrictions.
> 
> It seems these days this restriction has been relaxed. I checked out
> https://developer.mozilla.org/en-
US/docs/Using_files_from_web_applications#Example.3A_Showing_file%28s%29_size
> This works in FF 16, Opera 12, sort of in works in Chrome 22, hardly
> works in Safari 5 and doesn't work in IE 9.
> 
> Also check out the WHATWG description of type=file -
> http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-
type-attribute.html#file-upload-state-%28type=file%29
> 
> So while there are some restrictions that have been lifted there is no
> standard implementation of the new rules. So I guess it is back to
> validating the file server-side.

The Good Thing about using client-side scripting is that in many cases you 
actually can have the cake and eat it.  This example is no exception.  You 
can validate forms both client-side and server-side, providing users with 
user agents where client-side validation is possible with the additional 
benefits of providing immediate feedback and avoiding unnecessary 
roundtrips.


PointedEars
-- 
When all you know is jQuery, every problem looks $(olvable).

[toc] | [prev] | [next] | [standalone]

#16970

In comp.lang.javascript message <k6lgcv$vth$2@dont-email.me>, Mon, 29
Oct 2012 08:57:03, Denis McMahon <denismfmcmahon@gmail.com> posted:

>On Sun, 28 Oct 2012 23:32:33 -0700, Katja wrote:
>
>>> I wouldn't trust on file extensions. As a just a warning for user then
>>>
>>> it is ok. Just my "5 cents".
>>>
>> I know but I still need it =)
>
>Javascript has no direct access to the filesystem. Thus, it can not
>reliably determine the size of a file. At best, you can do (sub)string
>comparisons and regex checks against a file name entered into a form
>field.

JScript, in an HTA, running in Internet Explorer in Windows has; and it
can be fetched by (I suppose) HTTP and will run with a single additional
click.  E.G. : <http://www.merlyn.demon.co.uk/programs/32-bit/seek.hta>;
after that additional click, press green SEEK and wait a few seconds; it
will then give a directory listing (of files since yesterday).  I never
tried that before (the idea is that a local copy should be run from a
command prompt).

SEEK - see seakfyle.htm via
<http://www.merlyn.demon.co.uk/programs/32-bit/00index.htm> is a
functional 32-bit non-equivalent replacement for my 16-bit HUNT, in
<http://www.merlyn.demon.co.uk/programs/00index.htm>.  They can seek
with more discrimination than Microsoft provide; for example one can
seek files dated Friday AND between 32kB & 35kB AND name containing
Denis.

-- 
 (c) John Stockton, nr London, UK.  For Mail, see Home Page.  Turnpike, WinXP.
 Web  <http://www.merlyn.demon.co.uk/> - FAQ-type topics, acronyms, and links.
 Command-prompt MiniTrue is useful for viewing/searching/altering files. Free,
 DOS/Win/UNIX now 2.0.6; see <URL:http://www.merlyn.demon.co.uk/pc-links.htm>.

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web