• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 188
  • Last Modified:

Upload an image to a server using javascript

I have this original nicEdit.js for uploading an image. By default, this code uploads image to a 3rd party location.
I'd rather the images be uploaded to my own domain server.
Here is the code:

var nicUploadButton = nicEditorAdvancedButton.extend({	
	nicURI : 'https://api.imgur.com/3/image', 
//	nicURI : 'http://automatedxxxxxxxxxx.com/uploads',  // My Domain Server
    errorText : 'Failed to upload image',

	addPane : function() {
    if(typeof window.FormData === "undefined") {
      return this.onError("Image uploads are not supported in this browser, use Chrome, Firefox, or Safari instead.");
    this.im = this.ne.selectedInstance.selElm().parentTag('IMG');

    var container = new bkElement('div')
      .setStyle({ padding: '10px' })

		new bkElement('div')
      .setStyle({ fontSize: '14px', fontWeight : 'bold', paddingBottom: '5px' })
      .setContent('Insert an Image')

    this.fileInput = new bkElement('input')
      .setAttributes({ 'type' : 'file' })

    this.progress = new bkElement('progress')
      .setStyle({ width : '100%', display: 'none' })
      .setAttributes('max', 100)

    this.fileInput.onchange = this.uploadFile.closure(this);

  onError : function(msg) {
    alert(msg || "Failed to upload image");

  uploadFile : function() {
    var file = this.fileInput.files[0];
    if (!file || !file.type.match(/image.*/)) {
      this.onError("Only image files can be uploaded");
    this.fileInput.setStyle({ display: 'none' });

    var fd = new FormData(); // https://hacks.mozilla.org/2011/01/how-to-develop-a-html5-image-uploader/
    fd.append("image", file);

    var xhr = new XMLHttpRequest();
    xhr.open("POST", this.ne.options.uploadURI || this.nicURI);

    xhr.onload = function() {
      try {
        var data = JSON.parse(xhr.responseText).data;
      } catch(e) {
        return this.onError();
      if(data.error) {
        return this.onError(data.error);
    xhr.onerror = this.onError.closure(this);
    xhr.upload.onprogress = function(e) {
      this.setProgress(e.loaded / e.total);
    xhr.setRequestHeader('Authorization', 'Client-ID c37fc05199a05b7'); 

  setProgress : function(percent) {
    this.progress.setStyle({ display: 'block' });
    if(percent < .98) {
      this.progress.value = percent;
    } else {

  onUploaded : function(options) {
    var src = options.link;
    if(!this.im) {
      var tmp = 'javascript:nicImTemp();';
      this.ne.nicCommand("insertImage", src);
      this.im = this.findElm('IMG','src', src);
    var w = parseInt(this.ne.selectedInstance.elm.getStyle('width'));
    if(this.im) {
        src : src,
        width : (w && options.width) ? Math.min(w, options.width) : ''


Open in new window

I'm reasonably sure that     'xhr.setRequestHeader('Authorization', 'Client-ID c37fc05199a05b7');'
is the line I need to customize for my server, but I've been unable to make it work.
If I need to add my username:password to the setRequestHeader, please explain.

Thank you,
Russ Cummings
Russ Cummings
  • 2
  • 2
1 Solution
Julian HansenCommented:
What do you have on your server to receive the image?
Russ CummingsIT ConsulantAuthor Commented:
Here is my server info, hope this helps you:
I know I've got FTP available to me, but I've never used it to receive on my server.
If you don't see what you're looking for let me know, I'll contact the adminstrator.

cPanel Version       68.0 (build 19)
Apache Version       2.4.29
PHP Version       5.6.32
MySQL Version       5.6.38
Architecture       x86_64
Operating System       linux
Dedicated IP Address
Path to Sendmail       /usr/sbin/sendmail
Path to Perl       /usr/bin/perl
Perl Version       5.16.3
Kernel Version       3.10.0-693.2.2.el7.x86_64
Julian HansenCommented:
FTP is not in play in this scenario.

You need a server side script that can receive the posted data and place it where it needs to go.

It is not possible to set up an HTML page, send files to the server and have them saved automatically - there has to be some server script that can accept and process that data.
Russ CummingsIT ConsulantAuthor Commented:
Found a server side php code that worked in conjunction with nicEdit that worked fine.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now