How to upload an image file url to indexedDB to render on page

Question

The goal is when I add a customer I want to be able to upload an image as well. On the main customer page, it will list all customers and a thumbnail image of the customer.

Currently, when I upload an image to indexedDB it is not taking in the correct URL. In my current learning project when I upload an image it uploads this URL address:

C:\fakepath\01-gel-nail-designs-thecuddl.jpg

I am not sure why it keeps giving the C:\fakepath which is not the correct path so when it renders on the main customer page it is just a broken image filler.

Here is my index.html:

 

  
    
    
    
    


    Customer Manager

    
    

    
    

    
    
  
  

    
      
        
          
          Customer Manager v0.1
        
      
    

    
      
        
          
            Customers (current)
            Add Customer
            Clear Customers
          
        
        
          Customers
          
            
              
                
                  #
                  Name
                  Email Address

Here is my add.html:



  
    
    
    
    


    Add Customer

    
    

    
    

    
    
  
  

    
      
        
          
          Customer Manager v0.1
        
      
    

    
      
        
          
            Customers (current)
            Add Customer
            Clear Customers
          
        
        
          Add Customer
          
              
                Customer Name
                
              
              
                Customer Email

Here is my main.js:

$(document).ready(function(){
    //Open database
    var request = indexedDB.open('customermanager',1);

    request.onupgradeneeded = function(e){
        var db = e.target.result;

        if(!db.objectStoreNames.contains('customers')){
              var os = db.createObjectStore('customers',{keyPath: "id", autoIncrement:true});
                //Create Index for Name
                os.createIndex('name','name',{unique:false});
        }
    }


    //Success
    request.onsuccess = function(e){
        console.log('Success: Opened Database...');
        db = e.target.result;
        //Show Customers
        showCustomers();
    }

    //Error
    request.onerror = function(){
        console.log('Error: Could Not Open Database...');
    }
});

//Add Customer
function addCustomer(){
    var name = $('#name').val();
    var email = $('#email').val();
    var image = $('#imageSelector').getAttribute('src');



    var transaction = db.transaction(["customers"],"readwrite");
    //Ask for ObjectStore
    var store = transaction.objectStore("customers");

    //Define Customer
    var customer = {
        name: name,
        email: email,
        image: image
    }

    //Perform the Add
    var request = store.add(customer);

    //Success
    request.onsuccess = function(e){
        window.location.href="index.html";
    }

    //Error
    request.onerror = function(e){
        alert("Customer was not added");
        console.log('Error', e.target.error.name);
    }
}

//Display Customers
function showCustomers(e){
    var transaction = db.transaction(["customers"],"readonly");
    //Ask for ObjectStore
    var store = transaction.objectStore("customers");
    var index = store.index('name');

    var output = '';
    index.openCursor().onsuccess = function(e){
        var cursor = e.target.result;
        if(cursor){
            output += "";
            output += ""+cursor.value.id+"";
            output += ""+cursor.value.name+"";
            output += ""+cursor.value.email+"";
              output += "";
            output += "Delete";
            output += "";
            cursor.continue();
        }
        $('#customers').html(output);
    }
}

//Delete a Customer
function removeCustomer(id){
    var transaction = db.transaction(["customers"],"readwrite");
    //Ask for ObjectStore
    var store = transaction.objectStore("customers");

    var request = store.delete(id);

    //Success
    request.onsuccess = function(){
        console.log('Customer '+id+' Deleted');
        $('customer_'+id).remove();
    }

    //Error
    request.onerror = function(e){
        alert("The customer was not removed")
        console.log('Error', e.target.error.name);
    }
}

//Clear All Customers
function clearCustomers(){
    indexedDB.deleteDatabase('customermanager');
    window.location.href="index.html";
}

//Update Customers
$('#customers').on('blur','.customer',function(){
    //Newly entered text
    var newText = $(this).html();
    //Field
    var field = $(this).data('field');
    //Customer ID
    var id = $(this).data('id');

    //Get Transaction
    var transaction = db.transaction(["customers"],"readwrite");
    //Ask for ObjectStore
    var store = transaction.objectStore("customers");

    var request = store.get(id);

    request.onsuccess = function(){
        var data = request.result;
        if(field == 'name'){
           data.name = newText;
        } else if(field == 'email'){
            data.email = newText;
        }

        //Store Updated Text
        var requestUpdate = store.put(data);

        requestUpdate.onsuccess = function(){
            console.log('Customer field updated...');
        }

        requestUpdate.onerror = function(){
            console.log('Customer field NOT updated...');
        }
    }
});

Here is an image of what indexedDB looks like in the console and the way it looks in my index.html:

Here is an image of what my add.html looks like:

Any guidance would be greatly appreciated.

UPDATE 1

Based off of some additional research I will not be able to do what I want with the code I have due to security reasons I won't be able to find the true path without using other methods. I am struggling with finding a way to implement the example from this link https://hacks.mozilla.org/2012/02/storing-images-and-files-in-indexeddb/.

How to upload an image file url to indexedDB to render on page

Answers (1)

Related Questions