image file size does not get smaller - data file: Upload.dataUrltoBlob(dataUrl, picFile.name) - ng-imp-crop ng-file-upload

Question

https://github.com/danialfarid/ng-file-upload

https://github.com/alexk111/ngImgCrop

Angularjs side:

    <div class="form-group">
      <div class="signup-profile-row-96">

          <div>Crop Image and Upload</div>
          <button class="row-left btn btn-primary" ngf-select ng-model="picFile" accept="image/*">
            Select Picture</button>
          <div ngf-drop ng-model="picFile" ngf-pattern="image/*"
               class="cropArea">
            <img-crop image="picFile  | ngfDataUrl"
                      result-image="croppedDataUrl" ng-init="croppedDataUrl=''">
            </img-crop>
          </div>
          <div><br/>
            <img ng-src="{{croppedDataUrl}}" />
          </div><br/>
          <button class="row-left btn btn-primary" ng-click="upload(croppedDataUrl, picFile)">Submit</button>
              <span class="progress" ng-show="progress >= 0">
                <div style="width:{{progress}}%" ng-bind="progress + '%'"></div>
              </span>
          <span ng-show="result">Upload Successful</span>
          <span class="err" ng-show="errorMsg">{{errorMsg}}</span>
       </div>
    </div>

I noticed that the file is zooming in on what is selected with

data: { file: Upload.dataUrltoBlob(dataUrl, picFile.name) },

Main issue here is:

=====>> the file size does not get smaller from the original size.

Second issue here is:

=====>> Gimp gives me an error.

GIMP Message: Opening /Users/testUser/test_hold_files/ failed: raw image plug-In could not open image

After I write the file out with the following it works in chrome but I can't open the file in gimp.

// Post files

router.post('/user/uploads', function (req, res){
    var form = new formidable.IncomingForm();
    form.parse(req, function(err, fields, files) {
        res.writeHead(200, {'content-type': 'text/plain'});
        res.write('received upload:\n\n');
        res.end(util.inspect({fields: fields, files: files}));
    });

    form.on('end', function(fields, files) {
        /* Temporary location of our uploaded file */
        var temp_path = this.openedFiles[0].path;
        /* The file name of the uploaded file */
        var file_name = this.openedFiles[0].name;
        /* Location where we want to copy the uploaded file */
        var new_location = "/Users/testUser/test_hold_files/";

        fs_extra.copy(temp_path, new_location + file_name, function(err) {
            if (err) {
                console.error(err);
            } else {
                console.log("success!")
            }
        });
    });
});

Any help is great.

Thanks

Answer 1

Ok, I found the answer to my issues.

Angular side.

            <div class="form-group">
              <div class="signup-profile-row-96">

                  <div>Crop Image and Upload</div>
                  <button class="row-left btn btn-primary" ngf-select ng-model="picFile" accept="image/*">
                    Select Picture</button>
                  <div ngf-drop ng-model="picFile" ngf-pattern="image/*"
                       class="cropArea">
                    <img-crop image="picFile  | ngfDataUrl"
                              result-image="croppedDataUrl"
                              result-image-quality="0.4"
                              result-image-size="450"
                              result-image-format="image/jpeg"
                              ng-init="croppedDataUrl=''">
                    </img-crop>
                  </div>
                  <div><br/>
                    <img ng-src="{{croppedDataUrl}}" />
                  </div><br/>
                  <button class="row-left btn btn-primary" ng-click="upload(croppedDataUrl, picFile)">Submit</button>
                      <span class="progress" ng-show="progress >= 0">
                        <div style="width:{{progress}}%" ng-bind="progress + '%'"></div>
                      </span>
                  <span ng-show="result">Upload Successful</span>
                  <span class="err" ng-show="errorMsg">{{errorMsg}}</span>
               </div>
            </div>