store the image on parse.com and store it in the database

One of the challenges I am facing is setting up a signup form where users can upload their images.

I encountered an issue while trying to upload to parse.com. When running the following JavaScript code, I received an alert with code 100. It's worth noting that there are no connection problems with parse.com, as regular signups work fine.

var fileUploadControl = $("#img1")[0];
if (fileUploadControl.files.length > 0) {
  var file = fileUploadControl.files[0];
  var name = "photo.png";

  var parseFile = new Parse.File(name, file);

  parseFile.save().then(function() {
  // The file has been saved to Parse.
  var url = parseFile.url();


  user.set("img", url);


}, function(error) {
        alert("Error: " + error.code + " " + error.message);

  // The file either could not be read, or could not be saved to Parse.
});
}

Here is the HTML markup where "img1" is declared:

<form dir="rtl" class="form-container" id="signUp_form" method='post'>
.........................
......................
<input type="file" name="img1" size="40"  id="img1" onchange="readURL(this);">
<img id="blah" src="empty-f.gif" alt="your image" width="150px" height="150px" />
</form>

If necessary, here is the relevant function:

function readURL(input) {

        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {

                $('#blah')
                    .attr('src', e.target.result);
            };

            reader.readAsDataURL(input.files[0]);
        }
    }

Thank you!

Answer №1

When dealing with the user img column as a pointer to an image object, ensure that you assign the value to the image object itself rather than the URL.

user.set("img", parseFile);

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

Stopping video playback when hovering over it

Can anyone help me modify this code so that a video plays only when hovering over it, and stops playing once the hover ends? What changes should I make to the JavaScript portion of the code for this functionality? <div class="padding-box height-40"&g ...

Retrieving JSON object Array from a Local Server through Firefox Results in CSP Error or NetworkError

Hey there, hope everyone is having a great night! I just got caught up in something for about an hour and a half, so I apologize in advance for taking up your time with this question. So, I'm trying to retrieve the posts from: http://localhost:5000/p ...

The AngularJS script is throwing an error that states "ReferenceError: Invalid left-hand side in assignment

While attempting to establish a connection with a webservice, I made an attempt using AngularJS $http option. However, when testing it out, I encountered an error in the console of my Chrome browser: ReferenceError Invalid left-hand side in assignment. Des ...

Is npm bundled with node-gyp?

I am currently experiencing an issue where running npm install locally does not produce much output when using npm v6.14.9. However, when I deploy to the server, it generates some incomprehensible messages like: gyp info spawn args ['some properties a ...

JavaScript button not responding to click event

Here is the initial structure that I have: <section id="content"> <div class="container participant"> <div class="row"> <div class="input-group"> <div class="input-group-prepend"> ...

How can a command in a test be executed that is located within a specific "section" in Nightwatch?

I've been utilizing nightwatch for my test automation. Within my page object, I have a "section" containing various commands. However, when attempting to call these commands in the test script, I encountered an error stating "section is not a function ...

Validation for dates in Angular.Js input is important to ensure that only

Take a look at this form: <form name="user_submission" novalidate="novalidate" method="post"> <input type="date" name="date_of_birth" ng-focus="save_data()" ng-model-options="{timezone: 'UTC'}" ng-pattern="/^(19\d{2}|[2-9]& ...

What is the reason for JavaScript documentation using a nested array to define a function's parameters in its syntax?

I'm struggling to articulate my question, but as I delve into the documentation for JavaScript and Node.js, I notice they define syntax in a way such as this. var new_array = old_array.concat(value1[, value2[, ...[, valueN]]]) It seems like all th ...

The expiration time and domain name for cookies are not saved in Angular.js

As a newcomer, I am currently working on storing cookies and setting parameters such as expiration date, domain name, and security. I have created a factory to handle cookie storage. app.factory('SetCookies',function($cookieStore,$timeout,$windo ...

``Is there a way to dynamically display an image along with its corresponding title and content

After dynamically inserting a title and content, I found myself struggling to include an image between them. Is there a way to accomplish this? This issue arises in my controller. const postSchema = { title: String, content: String, }; const Post ...

Steps for Integrating a Web Service Reference in NodeJS

Can a Web reference be added to a NodeJS project similar to how it's done in .NET framework Web API Projects? Essentially, the NodeJS API project will serve as a middleware between the Front End and an XML Web service. The XML Web service is a secure ...

Issue with AJAX functionality in CodeIgniter causing errors

I am facing an issue with Ajax in CodeIgniter. The alert message within the script works perfectly fine, but for some reason, the controller function is not being called. View section: <div class="col-md-6 col-sm-6 col-xs-12"> <a class="butt ...

What methods can be used to initiate form error handling in React/Javascript?

I am currently utilizing Material-UI Google Autocomplete, which can be found at https://material-ui.com/components/autocomplete/#google-maps-place, in order to prompt users to provide their address. https://i.stack.imgur.com/nsBpE.png My primary inquiry ...

Converting objects into CSV format and exporting them using JavaScript

When exporting to CSV, large strings are causing other cells to be rewritten. See the screenshot for the result of the export here. For the code related to this issue, refer to this link. The question is how to prevent large string values in a cell from a ...

Vuex data fails to update upon browser reload in Nuxt SSR

After explaining the bug, I discovered something interesting; Component codes async fetch(){ await this.$store.dispatch('bots/getBots') }, computed: { ...mapState('bots', ['bots']) }, Store codes export const state = () ...

What is the proper way to add data to an HTML page using JQuery and Ajax?

I'm currently in the process of setting up a feature for displaying more articles using Python, Flask, and Ajax. The backend functionality is all set up and running smoothly, but I'm stuck on how to incorporate the new data into the HTML using jQ ...

How can you set a condition for when no matches are found in a list filter?

I recently came across a fascinating example on W3 Schools that taught me how to implement a search filter. Below, I have customized it for everyone's reference. I am interested in modifying it to only display a list item with the message: No matche ...

The Hull.js Node.js npm module now offers convex hull computations instead of concave hull calculations

For my project, I am utilizing the node.js module called hull.js to compute a concave hull. However, when following the steps outlined in the "How it works" section on this link, the algorithm seems to halt at the 2nd step, resulting in a convex hull ins ...

Checking for `this instanceof Cookies` in the source code of the Node.js cookie middleware

Currently, I am delving into the inner workings of the cookie middleware and have turned to examining the source code. This middleware is set to take over from the now deprecated cookieParser(). Link to cookies.js I could use some assistance in clarifying ...

Show an Image from an RSS Feed

I am currently extracting information from an RSS feed using the rss-parser library and then displaying the results in a list. To add the data to the state, I use the following code: async getJobsData() { let feed = await parser.parseURL( "http ...