Yii 1.1: eajaxupload

EAjaxUpload: Uploading files using ajax (without flash)
101 followers

Check new extension EFineUploader http://www.yiiframework.com/extension/efineuploader/


Uploading files using ajax (without flash).
Based on http://valums.com/ajax-upload/

Installation

  • Extract the release file under protected/extensions

Requirements

  • Yii 1.1 or above

Usage

view:

<? $this->widget('ext.EAjaxUpload.EAjaxUpload',
array(
        'id'=>'uploadFile',
        'config'=>array(
               'action'=>Yii::app()->createUrl('controller/upload'),
               'allowedExtensions'=>array("jpg"),//array("jpg","jpeg","gif","exe","mov" and etc...
               'sizeLimit'=>10*1024*1024,// maximum file size in bytes
               'minSizeLimit'=>10*1024*1024,// minimum file size in bytes
               //'onComplete'=>"js:function(id, fileName, responseJSON){ alert(fileName); }",
               //'messages'=>array(
               //                  'typeError'=>"{file} has invalid extension. Only {extensions} are allowed.",
               //                  'sizeError'=>"{file} is too large, maximum file size is {sizeLimit}.",
               //                  'minSizeError'=>"{file} is too small, minimum file size is {minSizeLimit}.",
               //                  'emptyError'=>"{file} is empty, please select files again without it.",
               //                  'onLeave'=>"The files are being uploaded, if you leave now the upload will be cancelled."
               //                 ),
               //'showMessage'=>"js:function(message){ alert(message); }"
              )
)); ?>

controller:

public function actionUpload()
{
        Yii::import("ext.EAjaxUpload.qqFileUploader");
 
        $folder='upload/';// folder for uploaded files
        $allowedExtensions = array("jpg");//array("jpg","jpeg","gif","exe","mov" and etc...
        $sizeLimit = 10 * 1024 * 1024;// maximum file size in bytes
        $uploader = new qqFileUploader($allowedExtensions, $sizeLimit);
        $result = $uploader->handleUpload($folder);
        $return = htmlspecialchars(json_encode($result), ENT_NOQUOTES);
 
        $fileSize=filesize($folder.$result['filename']);//GETTING FILE SIZE
        $fileName=$result['filename'];//GETTING FILE NAME
 
        echo $return;// it's array
}

Resources

Total 20 comments

#17410 report it
snowwalker at 2014/06/06 02:28pm
Single file upload

Is it possible for not allow multiple uploads?

#17396 report it
Trejder at 2014/06/03 06:46am
FineUploader licensing

Keep in mind, that even though FineUploader (which stands behind this extension) is open source, it still require you to pay license fee, if you're going to use it in a commercial product!

Here is a cite from FineUploader FAQ:

The intent of our licensing model is to make Fine Uploader freely accessible to free open-source projects, while collecting money from commercial users. We put a good amount of time, resources, and money into this project, and the financial sustainability of the library is important in order for us to continue to provide quick support, new features, and maintenance. There are even more reasons for purchasing a license on our homepage.

So, think twice, before you start using this extension in any non-free project or you may quickly run into some serious licensing issues!

#17087 report it
rajesh chaurasia at 2014/05/01 07:38am
nice

nice extension help me a lot. thanks

#16815 report it
amanchandel at 2014/03/31 07:42am
upload image

help in display image .good work

#16814 report it
amanchandel at 2014/03/31 07:41am
image upload

can u tell me how to show image in view form

#14500 report it
aliabdzad at 2013/08/18 09:12am
a problem

hi all ... i've a problem with this ext that it always give me 'failed' after submiting

i want too add images to this directori : D:\software\xampp\htdocs\yii\demos\image\upload

this is my action in PostController:

public function actionUpload()
{
        Yii::import("ext.EAjaxUpload.qqFileUploader");
        $folder=Yii::app()->request->baseUrl . "/upload/";// folder for uploaded files
        $allowedExtensions = array("jpg","png","pdf");//array("jpg","jpeg","gif","exe","mov" and etc...
        $sizeLimit = 1 * 1024 * 1024;// maximum file size in bytes
        $uploader = new qqFileUploader($allowedExtensions, $sizeLimit);
        $result = $uploader->handleUpload($folder);
 
        $fileSize=filesize($folder.$result['filename']);//GETTING FILE SIZE
        $fileName=$result['filename'];//GETTING FILE NAME
        $result=htmlspecialchars(json_encode($result), ENT_NOQUOTES);
 
        echo $result;// it's array
        echo 'ok';
}

and this is my view code :

<?php
 $this->widget('ext.EAjaxUpload.EAjaxUpload',
array(
        'id'=>'uploadFile',
        'config'=>array(
               'action'=>Yii::app()->getBaseUrl().'/upload',
               'allowedExtensions'=>array("jpg"),//array("jpg","jpeg","gif","exe","mov" and etc...
               'sizeLimit'=>10*1024*1024,// maximum file size in bytes
               //'minSizeLimit'=>10*1024*1024,// minimum file size in bytes
               //'onComplete'=>"js:function(id, fileName, responseJSON){ alert(fileName); }",
               //'messages'=>array(
               //                  'typeError'=>"{file} has invalid extension. Only {extensions} are allowed.",
               //                  'sizeError'=>"{file} is too large, maximum file size is {sizeLimit}.",
               //                  'minSizeError'=>"{file} is too small, minimum file size is {minSizeLimit}.",
               //                  'emptyError'=>"{file} is empty, please select files again without it.",
               //                  'onLeave'=>"The files are being uploaded, if you leave now the upload will be cancelled."
               //                 ),
               //'showMessage'=>"js:function(message){ alert(message); }"
              )
)); ?>

tanx in advance and sorry for this amature question ....

#13948 report it
vinoth.mohan at 2013/07/09 05:04am
The reason y shows failed.

Use this code,

public function actionUpload()
{
        Yii::import("ext.EAjaxUpload.qqFileUploader");
        $folder=Yii::app() -> getBasePath() . "/../images/uploads/";// folder for uploaded files
        $allowedExtensions = array("jpg","png","pdf");//array("jpg","jpeg","gif","exe","mov" and etc...
        $sizeLimit = 1 * 1024 * 1024;// maximum file size in bytes
        $uploader = new qqFileUploader($allowedExtensions, $sizeLimit);
        $result = $uploader->handleUpload($folder);
 
        $fileSize=filesize($folder.$result['filename']);//GETTING FILE SIZE
        $fileName=$result['filename'];//GETTING FILE NAME
        $result=htmlspecialchars(json_encode($result), ENT_NOQUOTES);
 
        echo $result;// it's array
}

this code should be added after getting file name: $result=htmlspecialchars(json_encode($result), ENT_NOQUOTES);

#13731 report it
paskuale at 2013/06/20 07:37am
foreach multi instance

Can I put widget in foreach() loop ? thanks

#12957 report it
Fragoulas at 2013/04/23 09:27am
For large files >40mb

If you cannot upload large files larger that 35mb-40mb, according to this, you have to set the content type of the request header to "multipart/form-data" instead of "application/octet-stream".

File to change: assets/fileuploader.js(1355)

xhr.setRequestHeader("Content-Type", "multipart/form-data");
//xhr.setRequestHeader("Content-Type", "application/octet-stream");
#12956 report it
Trejder at 2013/04/23 08:04am
Differences between EAjaxUploader and EFineUploader

Can you explain, in brief, here or there, what is key difference between EAjaxUploader and EFineUploader? Is the only difference, a different library behind? Or maybe new EFineUploader offers some features that EAjaxUploader lacks?

#12954 report it
kosenka at 2013/04/23 07:13am
check new extension EFineUploader

@All - check new extension EFineUploader http://www.yiiframework.com/extension/efineuploader/

#12953 report it
Konstantinos Filios at 2013/04/23 06:00am
Chuking for large file uploads

@Trejder I think the misunderstanding comes from the fact that this extension does not mention which version of the original plugin it wraps. Tinky probably saw the original plugin's docs/website and noticed that it supports chunking for large file uploads (up to 4GB). But this is for the latest version of the plugin.

I took a look around and noticed that the PHP server-side handler for the latest version of the plugin has been modified to support resume, chunking, etc., and can be found here:

https://github.com/mrCartmenez/file-uploader/tree/master/server

Of course this boils down to whether this Yii extension claims to support the latest version of the plugin or not. And in our case, it doesn't, so the truth is somewhere in the middle.

I have already created a fork of this extension on github, but never tested the big file uploads, since they seem to be supported by only late versions of browsers, as you can see here http://blog.fineuploader.com/2012/12/file-chunkingpartitioning-is-now.html

It looks like the updated php code has completely removed the XHR method and only supports chunking. I hope the above pointers will help you do your thing for now if you're not in a hurry. Otherwise I'll try to update the extension fork to see what can be supported and how, of course announcing details here so the extension author himself can have a look.

#12948 report it
Trejder at 2013/04/22 06:15pm
@tiky

If I'm not mistaken, this is only a wrapper (Yii extension) for Ajax Upload plugin. So, you should address all questions concerning performance and filesize limits to authors of original plugin, not to the author of Yii extension.

You should also check your server (or hosting) settings and limitations. This plugin most likely uses HTTP protocol, so PHP's and Apache (server) limits / settings apply. I'm also not sure, if 256 MB of server RAM memory will be enough to handle 1-2 GB file transfers? This sounds like possible server kill.

#12943 report it
tiky at 2013/04/22 01:05pm
upload big files

Hy i want to upload big files like 1gb or 2gb movie files. But it seems that it's using a lot memory to copy that file. Is there a way to do this without using so much memory. my memory limit is at memory_limit = 256M but i can upload maximum 50mb/60mb files.

thanks

#12924 report it
ajimatahari at 2013/04/21 05:29am
upload worked, but the status failed was given

hi, i'm figuring out what's wrong with my code, i used your extension. it's worked to upload file to specified folder. but the status "Failed" was printed: "tbl_datasiswa.xls 62.0kB Failed" . there's also undetected file inside the specified folder (but the files is there): "{"error":"No files were uploaded."}"

#12906 report it
Konstantinos Filios at 2013/04/19 08:15am
Fork for fineuploader 3.4.1

Hi kosenka,

thanks a lot for the great plugin. I just wanted to let you know I've forked your repo on github and made some (unfortunately not backward compatible) changes to integrate with the Fine Uploader 3.4.1.

https://github.com/drcypher/EAjaxUpload

#12364 report it
Legolas at 2013/03/15 02:24pm
Re: Upload Failed.

Try to add something like this in your _form.php view:

<div class="row">
  <?php echo $form->labelEx($model,'logo'); ?>
  <?php 
      $this->widget('ext.EAjaxUpload.EAjaxUpload', array(
         'id'=>'image',
         'config'=>array(
         'action'=>Yii::app()->createUrl('/associazioni/upload'),
         'allowedExtensions'=>array("jpg", "jpeg", "png", "gif"),
         'sizeLimit'=>2*1024*1024,// maximum file size in bytes
         'onSubmit'=>"js:function(file, extension) { 
                        $('div.preview').addClass('loading');
                      }",
         'onComplete'=>"js:function(file, response, responseJSON) {
                          $('#thumb').load(function(){
                            $('div.preview').removeClass('loading');
                            $('#thumb').unbind();
                            $('#Associazioni_logo').val(responseJSON['filename']);
                          });
                          $('#thumb').attr('src', '/../images/temp/'+responseJSON['filename']);
                        }",
    'messages'=>array(
            'typeError'=>"{file} has invalid extension. Only {extensions} are allowed.",
            'sizeError'=>"{file} is too large, maximum file size is {sizeLimit}.",
            'emptyError'=>"{file} is empty, please select files again without it.",
            'onLeave'=>"The files are being uploaded, if you leave now the upload will be cancelled."
        ),
      )
    )); 
 
 
    echo $form->hiddenField($model,'logo');
    echo "<img id='thumb' src='/images/associazioni/".$model->logo."'>";
  ?>
  <?php echo $form->error($model,'logo'); ?>
</div>
#12362 report it
Queryton at 2013/03/15 02:02pm
Re: Upload Failed

I'm sure it's possible with JS.

You could probably use a renderPartial method which pulls the image.

Something like this perhaps: http://www.yiiframework.com/wiki/49/update-content-in-ajax-with-renderpartial/

EDIT: I looked through the code once more, you could probably push the "preview" exactly like the "success" message or "failed" message.

The relevant code is in EAjaxUpload/qqFileUploader.php, at line 143.

#12361 report it
MiroK at 2013/03/15 01:58pm
Re: Upload Failed

Thanks guys, I added app()->getBaseUrl() to the path is it works now.. Probably got lost in the folders..

Now, is there any way to push the uploaded image to the form as a preview, before submitting the form? Can I call a JS script from actionUpload() right after the image is uploaded? Or is there any other way?

#12360 report it
Queryton at 2013/03/15 01:07pm
Re: Upload Failed

MiroK, make sure your upload path is correct as well. (e.g. "images/uploads/" is what I used to make it work)

Leave a comment

Please to leave your comment.

Create extension