Other resources

Upload image into your spreadsheet

The following example shows how to upload images from your local machine to your spreadsheet. Later, you can post the data to your server.

Double click in the image cell to upload a new image.



Source code

<html>
<script src="https://bossanova.uk/jexcel/v3/jexcel.js"></script>
<script src="https://bossanova.uk/jsuites/v2/jsuites.js"></script>
<link rel="stylesheet" href="https://bossanova.uk/jexcel/v3/jexcel.css" type="text/css" />
<link rel="stylesheet" href="https://bossanova.uk/jsuites/v2/jsuites.css" type="text/css" />

<div id="spreadsheet"></div>

<script>
var data = [
    ['Yellow', 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDABQODxIPDRQSEBIXFRQYHjIhHhwcHj0sLiQySUBMS0dARkVQWnNiUFVtVkVGZIhlbXd7gYKBTmCNl4x9lnN+gXz/2wBDARUXFx4aHjshITt8U0ZTfHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHz/wgARCABkAGQDAREAAhEBAxEB/8QAGQABAAMBAQAAAAAAAAAAAAAAAAEDBQQC/8QAGAEBAAMBAAAAAAAAAAAAAAAAAAECAwT/2gAMAwEAAhADEAAAAcUAAAAAAA9FgIAJBWeQAej2QQSADyeQAAXUtoZaVtKr58mmXmYAAAvpbb5eiU8trhOWP088TAAA1ebo689JQiZR6mMXpx5dMwABu8nR0VmtatNVp6q1yujLi1xAAGtz66Od4TXFuDTS6sZfTyVWoAJJiba6bXPe2Jrrau08mmedvhExAABMTKerO99Z5rxz3zgiYAAAkmLWVvXbPzMAAAACRExMAAAAAAAAAf/EACUQAAEEAQMCBwAAAAAAAAAAAAEAAgMREhMgMAQzEBQhIiMxUP/aAAgBAQABBQLnAtaZRjIGDlg6tN16ZWmaIo7AaWblm5ZErIrNyzcs3Im97I3SIdM0J0TLMCIrgiZm4AAIsKAKliybvgZ8fqFd7J24yboO0iLRsLOiDa6nubukd7fBwR+2WpHZP3MOLo5WvCNrTU0lcTZ3tXminzOdyGvwf//EACIRAAEDAwQDAQAAAAAAAAAAAAEAAhEDECASITBBE1BRMf/aAAgBAwEBPwH1YaSgxeNqNL4iI4Gtm82cAeCnsMqgzb+Wm8Kr1mw7XFinmTmIuFqTnRtxB/1agtZ65DB9D//EACMRAAIBAwQBBQAAAAAAAAAAAAECAAMRIBASITBQEzEyQVH/2gAIAQIBAT8B8WzAQ1DA7QVP3pdto1DS8VrdFQ85UzcZt8sNulL2zqDm+LRRYZnmEW1uYifZ6jTBnpwIB43/xAAlEAABAwIGAQUAAAAAAAAAAAAAARExIDACECEiUWESQEFQgaH/2gAIAQEABj8C9B+DkD/YqNGXsMtUkkkkkkmtehuVctutnoZKO7D83cOfNpcNSrW6HebqeOC1yR8d/8QAJBAAAgIBAwQCAwAAAAAAAAAAAREAITEgQXEQMFFhQKGBkdH/2gAIAQEAAT8h75W8DJM4c7t4y0uYRN4L7m0UoILA5RoYRHlzK8HmHNkGkrI56Sx8Ic4jAPBS5u5c+gEJk9ZyteTB1o+qgdH+4dM08Qh32KfZkwSAgIbEcYucaNyq/cIRWtQWBKPIHxAGENQGOCIt712V46BjhoP5IgxDf4awknIsRRSqBaIHr3rkERVkShFbhCYzEAOAwJuTD2MYzKwlPcKK+koyUIe2xYoQ+u4z8T//2gAMAwEAAgADAAAAELbbbbbbbSSaRbbSbRaTbbbkjbbbaWFsrbbaKnjbba3v4LbbWwsJbaWENizbbdEo1bbbTE7bbbbSrbbbbbbbbb//xAAjEQEAAgEDAwUBAAAAAAAAAAABABEhECAxMEFhQFBRcYGx/9oACAEDAQE/EPa+JgwYySrlEWehd8SqxDDARTQUpreP1mGIkG4kSAInfesdCDMS40mFN9lPiXLj0pLHcBKm59QJQj2krU5/kQ34nHEQKE8bHwInSKhoiHbqW+k//8QAIBEAAgICAQUBAAAAAAAAAAAAAAERMSEwECBBUGFxUf/aAAgBAgEBPxDxdqdlgaQigmnWjIdyW3LGxFMaD39aJ4/nH3mSx61y4yJJmSKw9DF7OXhieBk2RK61hDG3JLMEEzJaLsqsH3thSheA/8QAJxABAAICAQIGAgMBAAAAAAAAAQARITFBUWEgMIGRobFx0RBAweH/2gAIAQEAAT8Q88lCA2igidb2VQxaqYnDDdgycPzBMByF56Md4kQVZh0WGfeaqjg3VtH3Bym3YwxVl+sEy0FTagH6SVNcleHVqlJsZnu94dG+v57y6xLWwOLuvghSXnV7r9rNOsB6BR8LLVktt5cVOQj2A5H/AAliqs3eDkD/AA9pn8UHoYPG9KTvEEtPTWCU6sn1qjcrh8hyamQukBkKgOJWlhENPmLb2gA4FqcP3ERceMhVI2dDBKGj1/Sb4PaBVjiW7PWDlZ6NHjAnhT5ZRpKYtaZ6mGPl7LhnKtO1xDGimAFceM6Gf8w7+fuIT+FiplQJzC5GhxpE4paPEB3XvFSCrM7hKgeXJ+4J+YRoXMsJW71Lai46RAGvGVUHZUNI6hwoum2YQR7f9wey3RzAUPPlFJv3YBzGBzCDlfl2zuM3/T//2Q=='],
    ['Viva la vida', 'data:image/jpeg;base64,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'],
];

jexcel(document.getElementById('spreadsheet'), {
    data:data,
    columns: [
        { type:'text', width:300, title:'Title' },
        { type:'image', width:120, title:'Cover' },

     ]
});
<script>

</script>
</html>