The issue with ngFileUpload causing empty file posts on Safari

Currently, I am utilizing ngFileUpload to transmit images to the Cloudinary service. My application is constructed on Ionic and is meant to be functional on both iOS and Android platforms. The code snippet below showcases my image uploading process:

.service('photoUploadService', ['$q','Upload', '$ionicLoading', 'AppModel',
function($q, $upload, $ionicLoading, AppModel){
    // implementation details omitted for brevity
}]);

Under the Android environment, the code runs smoothly and uploads the images successfully. However, when executed on iOS, an "Empty File" error message is received from Cloudinary. After thorough debugging, it appears that the file creation process is correct, with the only error being reported as "Empty file".

Thus far, I have attempted the solutions provided in several posts such as Convert base64 data url to image file in angularjs, Convert base64 data image file in angularjs, and . Unfortunately, none of these attempts have resolved the issue.

If anyone has insights or suggestions pertaining to this matter, your assistance would be greatly valued.

javascriptangularjsionic-frameworkng-file-upload

Answer №1

For those facing a similar issue, it seems that ng-file-upload is not compatible with cordova. You can refer to the original answer ng-file-upload not uploading in Ionics

If you need code to easily upload images to cloudinary, here is what worked for me.

ref.uploadPhoto = function(imageData, album, waitMessage, imgType){
    var deferred = $q.defer();
    var filename = Math.floor(Math.random()*90000) + 10000 + ".png";
    var options = {
        fileName: filename,
        chunkedMode: false,
        mimeType: "image/png",
        params: {'upload_preset': "XXXXX",
                'tags': album,
                'context': 'photo=' + filename},

    };

    $cordovaFileTransfer.upload("https://api.cloudinary.com/v1_1/XXXXX/upload",
        imageData, options)
        .then(function(result){
            var response = JSON.parse(result.response);
            response.type = imgType;
            deferred.resolve(response);
        }, function(err){
            console.error(err);
            deferred.reject(err);
        }, function(progress){
            var val = Math.round(((progress.loaded * 100.0) / progress.total));
            console.log(val);
            if(waitMessage){
                $ionicLoading.show({template: waitMessage + val + "%"});    
            }
        }).catch(function(err){
            console.error(err);
            deferred.reject(err);  
        });

    return deferred.promise;
};

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What could be causing the mousedown event to go unrecognized in JavaScript when using THREE?

I have a basic THREE.js setup and I am trying to click on a spherical object, however, nothing happens when I click anywhere in the browser. I attempted to follow the advice given in this post but it did not work. The full code is provided below: <!DO ...

javascripthtmlthree.js

Issue: ng-file-upload validation is not functioning correctly, resulting in the form always being considered valid

I'm looking to implement a file-upload feature for each item in an array. In order to achieve this, I am utilizing the ng-repeat directive to cycle through the array and incorporating the ng-file-upload plugin to manage the file upload process along w ...

javascriptangularjsformsvalidationng-file-upload

Step-by-step guide to displaying the dropdown menu button content at the top of the page in main.html by using the frameset tag

The layout of my main.html involves displaying menu.htm and welcome.htm using frameset. One issue that arises is with the drop-down menu buttons "Admin..." and "Scheduler...". When hovering over these buttons, the dropdown content does not display properly ...

javascripthtmlcss

Limiting the input frequency when executing a query with the `urql` GraphQL Client in React.js

My slider functions similarly to this one from Zillow's GitHub. It has minimum and maximum values, and triggers a query whenever the sliders are adjusted. The issue I'm facing is that the query is extensive, causing delays. I am looking for a wa ...

javascriptreactjsgraphqldebouncingurql

The essential information for the data confirmation should consist of either the name or value of the selected

I am looking to incorporate dynamic content into a data confirmation message that appears when the user clicks on submit. In my views, I have: <div class="form-check"> <input class="form-check-input" type="radio" na ...

javascriptjqueryruby-on-railsrubyconfirm

Loading remote content on a server for my Firefox OS application - On the Web and FxOS device

I haven't come across this issue in any forum, so I decided to reach out here. I'm encountering a problem with my FirefoxOS app on my FirefoxOS device (Geeksphone Developer Preview) when trying to retrieve remote content from the server. I am m ...

javascriptphpweb-applicationsxmlhttprequestfirefox-os

What could be causing the poor performance of WebGPU in my benchmark when compared to WebGL?

After running my benchmark code on the Latest Chrome Canary on Win11 and disabling vsync with unlocked fps, I noticed that WebGPU has around 1/3 the FPS of WebGL. I'm struggling to understand the reason behind this performance difference. Here is the ...

javascriptperformancethree.jswebglwebgpu

What is the best method for binding variables in Vue.JS using moustache syntax and passing parameters to them?

If I have an HTML structure like this: <div> {{ CUSTOM_MESSAGE }} </div> And in my data: data() { return { CUSTOM_MESSAGE: 'Hey there! This message is for {{name}} from {{location}}' } } Is there a way to dynamically p ...

javascripthtmlvue.jsvuetify.js

What is the method for obtaining multiple indices on an Array?

Attempting to find multiple index positions in an Array for a Boolean value. Experimenting with while and for loops to iterate through more than one index position without success so far. Below is the code snippet: let jo = [1,2,3,4,5] let ji = [1,2,3] ...

javascriptarrays

Having trouble resolving this issue: Receiving a Javascript error stating that a comma was expected

I am encountering an issue with my array.map() function and I'm struggling to identify the problem const Websiteviewer = ({ web, content, styles, design }) => { const test = ['1' , '2'] return ( {test.map(item => { ...

javascriptnext.jsjsx

Switching perspective in express with Pug

Hello everyone, I'm still getting the hang of using Node.js with Express and Jade. I've successfully set up a basic 1 page app where a login page is displayed by default. Once the user logs in and is authenticated against a database, the function ...

javascriptnode.jsexpresspug

The footer should remain at the bottom of the page without being permanently fixed

Is there a way to keep the bootstrap footer at the bottom without fixing it in place? In the code example below, the footer should always appear at the bottom. The white space after the footer should come before it. Using sticky-bottom achieves this, but ...

javascriptcsstwitter-bootstrapbootstrap-4footer

Discover the steps for dynamically integrating ionRangeSliders into your project

Recently, I integrated ionRangeSlider to display values to users using sliders. To set up a slider, we need to define an input tag like this: <input type="text" id="range_26" /> Then, we have to use jQuery to reference the input tag's ID in or ...

javascriptphpjqueryhtmlajax

Utilize AngularJS directives within an Angular component for enhanced functionality

I'm currently in the process of enhancing an angularjs directive to integrate it into my angular component. I have successfully set up the hybrid (ng1 + ng2) environment and have also managed to inject angularjs services into Angular and utilize them ...

angularjsangularangularjs-directiveupgradehybrid

Is it achievable to employ the object "angular" while still implementing the 'use strict' directive?

Whenever I use gulp-jshint, it requires me to include the 'use strict' directive in every file. This causes an issue with my global object emApp, defined in my app.js file as: var emApp = angular.module('emApp'); Interestingly, jshint ...

javascriptangularjsgulpjshint

Is it possible to pre-select a value in a PrimeVue Dropdown component?

Situation: Currently, I am incorporating PrimeVue into a Vue.js project. Within this setup, there is a dropdown component sourced from PrimeVue, utilizing an array of objects. The structure of the dropdown component appears as follows: <template #positi ...

javascriptvue.jsprimevue

cordova and nodejs causing a communication problem

As a UI front end Developer, my expertise lies in user interface design rather than server side and port connections. I have successfully created a node server.js file that looks like this: var app = express(); var http = require('http').Server( ...

javascriptnode.jscordovasocket.io

What are some ways I can efficiently load large background images on my website, either through lazy loading or pre

Just dipping my toes into the world of javascript. I'm currently tackling the challenge of lazy loading some large background images on my website. My goal is to have a "loading" gif displayed while the image is being loaded, similar to how it works ...

javascriptjquerycssbackground-imagelazy-loading

Tips on locating information within a pre-existing GET array with parameters provided

Apologies for the unclear title. I am currently utilizing a category chooser that pulls categories from an API. The process involves fetching a list of categories, filtering out their names, and presenting them in the category chooser. Upon clicking submit ...

javascriptjqueryarraysjsonapi

Using Vue JS to apply a filter to data fetched from an API

Within my code, I attempted to retrieve users with the role of Admin and only their usernames from the API JSON data. However, I encountered an issue where it did not work as expected. "response": [ { "profil ...

javascriptvue.js