Your Smart IOT

<p>Not too long ago I wrote about <a href="http://bit.ly/1qK4jQZ" target="_blank">uploading files to a Node.js server</a> that was making use of the Multer middleware.  In that scenario the files were saved to the file system and even though I didn’t demonstrate it, in theory the file metadata would be stored in a database.  What if you wanted to store the files in a database as a base64 string instead of on the file system?</p>
<p>We’re going to take a look at what it would take to allow file uploads in Node.js and convert them into base64 strings for database storage.</p>
<p>Let me start by saying that although this is possible, it is best to store your files on the filesystem and not within the database.  Storage on the filesystem is cheaper than database storage.</p>
<p>We’re going to start by creating a fresh Node.js project using NPM.  Create a project directory somewhere and from your Command Prompt (Windows) or Terminal (Mac and Linux), execute the following:</p>
<div id="crayon-574606f615182550296960" class="crayon-syntax crayon-theme-github crayon-font-monaco crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover">
<div class="crayon-toolbar" data-settings=" show"><span class="crayon-title">Create New Node Project</span>
<div class="crayon-tools">
<div class="crayon-button crayon-popup-button" title="Open Code In New Window"></div>
<p><span class="crayon-language">Shell</span></p>
</div>
</div>
<div class="crayon-plain-wrap"></div>
<div class="crayon-main">
<table class="crayon-table">
<tbody>
<tr class="crayon-row">
<td class="crayon-nums" data-settings="show">
<div class="crayon-nums-content">
<div class="crayon-num" data-line="crayon-574606f615182550296960-1">1</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-574606f615182550296960-2">2</div>
</div>
</td>
<td class="crayon-code">
<div class="crayon-pre">
<div id="crayon-574606f615182550296960-1" class="crayon-line"><span class="crayon-r">touch</span> <span class="crayon-v">app</span><span class="crayon-e">.js</span></div>
<div id="crayon-574606f615182550296960-2" class="crayon-line crayon-striped-line"><span class="crayon-e">npm</span> <span class="crayon-v">init</span> <span class="crayon-o">–</span><span class="crayon-v">y</span></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<p>For simplicity, our entire app will exist in the <strong>app.js</strong> file.  The command <code>npm init -y</code> will create our <strong>package.json</strong> file which will house all of the project dependencies.</p>
<p>Now we need to install such dependencies.  Execute the following from your Command Prompt or Terminal:</p>
<div id="crayon-574606f615193963793157" class="crayon-syntax crayon-theme-github crayon-font-monaco crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover">
<div class="crayon-toolbar" data-settings=" show"><span class="crayon-title">Install Node Dependencies</span>
<div class="crayon-tools">
<div class="crayon-button crayon-popup-button" title="Open Code In New Window"></div>
<p><span class="crayon-language">Shell</span></p>
</div>
</div>
<div class="crayon-plain-wrap"></div>
<div class="crayon-main">
<table class="crayon-table">
<tbody>
<tr class="crayon-row">
<td class="crayon-nums" data-settings="show">
<div class="crayon-nums-content">
<div class="crayon-num" data-line="crayon-574606f615193963793157-1">1</div>
</div>
</td>
<td class="crayon-code">
<div class="crayon-pre">
<div id="crayon-574606f615193963793157-1" class="crayon-line"><span class="crayon-e">npm</span> <span class="crayon-e">install</span> <span class="crayon-e">express</span> <span class="crayon-v">body</span><span class="crayon-o">–</span><span class="crayon-e">parser</span> <span class="crayon-v">multer</span> <span class="crayon-o">—</span><span class="crayon-v">save</span></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<p>With everything ready to go we can start coding.  Add the following to the project’s <strong>app.js</strong> file:</p>
<div id="crayon-574606f615199443667729" class="crayon-syntax crayon-theme-github crayon-font-monaco crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover">
<div class="crayon-toolbar" data-settings=" show"><span class="crayon-title">app.js</span>
<div class="crayon-tools">
<div class="crayon-button crayon-popup-button" title="Open Code In New Window"></div>
<p><span class="crayon-language">JavaScript</span></p>
</div>
</div>
<div class="crayon-plain-wrap"></div>
<div class="crayon-main">
<table class="crayon-table">
<tbody>
<tr class="crayon-row">
<td class="crayon-nums" data-settings="show">
<div class="crayon-nums-content">
<div class="crayon-num" data-line="crayon-574606f615199443667729-1">1</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-574606f615199443667729-2">2</div>
<div class="crayon-num" data-line="crayon-574606f615199443667729-3">3</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-574606f615199443667729-4">4</div>
<div class="crayon-num" data-line="crayon-574606f615199443667729-5">5</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-574606f615199443667729-6">6</div>
<div class="crayon-num" data-line="crayon-574606f615199443667729-7">7</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-574606f615199443667729-8">8</div>
<div class="crayon-num" data-line="crayon-574606f615199443667729-9">9</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-574606f615199443667729-10">10</div>
<div class="crayon-num" data-line="crayon-574606f615199443667729-11">11</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-574606f615199443667729-12">12</div>
<div class="crayon-num" data-line="crayon-574606f615199443667729-13">13</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-574606f615199443667729-14">14</div>
<div class="crayon-num" data-line="crayon-574606f615199443667729-15">15</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-574606f615199443667729-16">16</div>
<div class="crayon-num" data-line="crayon-574606f615199443667729-17">17</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-574606f615199443667729-18">18</div>
<div class="crayon-num" data-line="crayon-574606f615199443667729-19">19</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-574606f615199443667729-20">20</div>
<div class="crayon-num" data-line="crayon-574606f615199443667729-21">21</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-574606f615199443667729-22">22</div>
</div>
</td>
<td class="crayon-code">
<div class="crayon-pre">
<div id="crayon-574606f615199443667729-1" class="crayon-line"><span class="crayon-t">var</span> <span class="crayon-v">express</span> <span class="crayon-o">=</span> <span class="crayon-e">require</span><span class="crayon-sy">(</span><span class="crayon-s">“express”</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div>
<div id="crayon-574606f615199443667729-2" class="crayon-line crayon-striped-line"><span class="crayon-t">var</span> <span class="crayon-v">bodyParser</span> <span class="crayon-o">=</span> <span class="crayon-e">require</span><span class="crayon-sy">(</span><span class="crayon-s">“body-parser”</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div>
<div id="crayon-574606f615199443667729-3" class="crayon-line"><span class="crayon-t">var</span> <span class="crayon-v">multer</span> <span class="crayon-o">=</span> <span class="crayon-e">require</span><span class="crayon-sy">(</span><span class="crayon-s">“multer”</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div>
<div id="crayon-574606f615199443667729-4" class="crayon-line crayon-striped-line"><span class="crayon-t">var</span> <span class="crayon-v">fs</span> <span class="crayon-o">=</span> <span class="crayon-e">require</span><span class="crayon-sy">(</span><span class="crayon-s">“fs”</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div>
<div id="crayon-574606f615199443667729-5" class="crayon-line"><span class="crayon-t">var</span> <span class="crayon-v">app</span> <span class="crayon-o">=</span> <span class="crayon-e">express</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div>
<div id="crayon-574606f615199443667729-6" class="crayon-line crayon-striped-line"></div>
<div id="crayon-574606f615199443667729-7" class="crayon-line"><span class="crayon-v">app</span><span class="crayon-sy">.</span><span class="crayon-st">use</span><span class="crayon-sy">(</span><span class="crayon-v">bodyParser</span><span class="crayon-sy">.</span><span class="crayon-e">json</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div>
<div id="crayon-574606f615199443667729-8" class="crayon-line crayon-striped-line"><span class="crayon-v">app</span><span class="crayon-sy">.</span><span class="crayon-st">use</span><span class="crayon-sy">(</span><span class="crayon-v">bodyParser</span><span class="crayon-sy">.</span><span class="crayon-e">urlencoded</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span> <span class="crayon-v">extended</span><span class="crayon-o">:</span> <span class="crayon-t">true</span> <span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div>
<div id="crayon-574606f615199443667729-9" class="crayon-line"></div>
<div id="crayon-574606f615199443667729-10" class="crayon-line crayon-striped-line"><span class="crayon-v">app</span><span class="crayon-sy">.</span><span class="crayon-st">use</span><span class="crayon-sy">(</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-v">req</span><span class="crayon-sy">,</span> <span class="crayon-v">res</span><span class="crayon-sy">,</span> <span class="crayon-v">next</span><span class="crayon-sy">)</span> <span class="crayon-sy">{</span></div>
<div id="crayon-574606f615199443667729-11" class="crayon-line"><span class="crayon-h">    </span><span class="crayon-v">res</span><span class="crayon-sy">.</span><span class="crayon-e">header</span><span class="crayon-sy">(</span><span class="crayon-s">“Access-Control-Allow-Origin”</span><span class="crayon-sy">,</span> <span class="crayon-s">“*”</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div>
<div id="crayon-574606f615199443667729-12" class="crayon-line crayon-striped-line"><span class="crayon-h">    </span><span class="crayon-v">res</span><span class="crayon-sy">.</span><span class="crayon-e">header</span><span class="crayon-sy">(</span><span class="crayon-s">“Access-Control-Allow-Headers”</span><span class="crayon-sy">,</span> <span class="crayon-s">“Origin, X-Requested-With, Content-Type, Accept”</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div>
<div id="crayon-574606f615199443667729-13" class="crayon-line"><span class="crayon-h">    </span><span class="crayon-e">next</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div>
<div id="crayon-574606f615199443667729-14" class="crayon-line crayon-striped-line"><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div>
<div id="crayon-574606f615199443667729-15" class="crayon-line"></div>
<div id="crayon-574606f615199443667729-16" class="crayon-line crayon-striped-line"><span class="crayon-v">app</span><span class="crayon-sy">.</span><span class="crayon-e">post</span><span class="crayon-sy">(</span><span class="crayon-s">“/upload”</span><span class="crayon-sy">,</span> <span class="crayon-e">multer</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span><span class="crayon-v">dest</span><span class="crayon-o">:</span> <span class="crayon-s">“./uploads/”</span><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-t">array</span><span class="crayon-sy">(</span><span class="crayon-s">“uploads”</span><span class="crayon-sy">,</span> <span class="crayon-cn">12</span><span class="crayon-sy">)</span><span class="crayon-sy">,</span> <span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-v">req</span><span class="crayon-sy">,</span> <span class="crayon-v">res</span><span class="crayon-sy">)</span> <span class="crayon-sy">{</span></div>
<div id="crayon-574606f615199443667729-17" class="crayon-line"><span class="crayon-h">    </span><span class="crayon-v">res</span><span class="crayon-sy">.</span><span class="crayon-e">send</span><span class="crayon-sy">(</span><span class="crayon-v">req</span><span class="crayon-sy">.</span><span class="crayon-v">files</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div>
<div id="crayon-574606f615199443667729-18" class="crayon-line crayon-striped-line"><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div>
<div id="crayon-574606f615199443667729-19" class="crayon-line"></div>
<div id="crayon-574606f615199443667729-20" class="crayon-line crayon-striped-line"><span class="crayon-t">var</span> <span class="crayon-v">server</span> <span class="crayon-o">=</span> <span class="crayon-v">app</span><span class="crayon-sy">.</span><span class="crayon-e">listen</span><span class="crayon-sy">(</span><span class="crayon-cn">3000</span><span class="crayon-sy">,</span> <span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span> <span class="crayon-sy">{</span></div>
<div id="crayon-574606f615199443667729-21" class="crayon-line"><span class="crayon-h">    </span><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-s">“Listening on port %s…”</span><span class="crayon-sy">,</span> <span class="crayon-v">server</span><span class="crayon-sy">.</span><span class="crayon-e">address</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-v">port</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div>
<div id="crayon-574606f615199443667729-22" class="crayon-line crayon-striped-line"><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<p>This code was pretty much taken exactly from my previous post on <a href="http://bit.ly/1qK4jQZ" target="_blank">file uploads with Multer and Angular 2</a>.  However notice the following line:</p>
<div id="crayon-574606f6151a0184919446" class="crayon-syntax crayon-theme-github crayon-font-monaco crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover">
<div class="crayon-toolbar" data-settings=" show"><span class="crayon-title">app.js</span>
<div class="crayon-tools">
<div class="crayon-button crayon-popup-button" title="Open Code In New Window"></div>
<div class="ezAdsense adsense adsense-midtext" style="text-align:center;margin:12px;"><script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js" type="text/javascript">
</script> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-2979805726071943" data-ad-slot="7471922310" data-ad-format="auto"></ins> <script type="text/javascript">
//<![CDATA[
(adsbygoogle = window.adsbygoogle || []).push({});
//]]>
</script></div>
<p><span class="crayon-language">JavaScript</span></p>
</div>
</div>
<div class="crayon-plain-wrap"></div>
<div class="crayon-main">
<table class="crayon-table">
<tbody>
<tr class="crayon-row">
<td class="crayon-nums" data-settings="show">
<div class="crayon-nums-content">
<div class="crayon-num" data-line="crayon-574606f6151a0184919446-1">1</div>
</div>
</td>
<td class="crayon-code">
<div class="crayon-pre">
<div id="crayon-574606f6151a0184919446-1" class="crayon-line"><span class="crayon-t">var</span> <span class="crayon-v">fs</span> <span class="crayon-o">=</span> <span class="crayon-e">require</span><span class="crayon-sy">(</span><span class="crayon-s">“fs”</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<p>We’re including this dependency because we need to be able to read the file from the file system.  The goal here is to accept the file upload, save it to the file system temporarily, read it to convert into base64, then do cleanup on the file system.</p>
<p>Take a look at the following snippet of code:</p>
<div id="crayon-574606f6151a5204408435" class="crayon-syntax crayon-theme-github crayon-font-monaco crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover">
<div class="crayon-toolbar" data-settings=" show"><span class="crayon-title">app.js</span>
<div class="crayon-tools">
<div class="crayon-button crayon-popup-button" title="Open Code In New Window"></div>
<p><span class="crayon-language">JavaScript</span></p>
</div>
</div>
<div class="crayon-plain-wrap"></div>
<div class="crayon-main">
<table class="crayon-table">
<tbody>
<tr class="crayon-row">
<td class="crayon-nums" data-settings="show">
<div class="crayon-nums-content">
<div class="crayon-num" data-line="crayon-574606f6151a5204408435-1">1</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-574606f6151a5204408435-2">2</div>
<div class="crayon-num" data-line="crayon-574606f6151a5204408435-3">3</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-574606f6151a5204408435-4">4</div>
<div class="crayon-num" data-line="crayon-574606f6151a5204408435-5">5</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-574606f6151a5204408435-6">6</div>
<div class="crayon-num" data-line="crayon-574606f6151a5204408435-7">7</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-574606f6151a5204408435-8">8</div>
<div class="crayon-num" data-line="crayon-574606f6151a5204408435-9">9</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-574606f6151a5204408435-10">10</div>
<div class="crayon-num" data-line="crayon-574606f6151a5204408435-11">11</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-574606f6151a5204408435-12">12</div>
</div>
</td>
<td class="crayon-code">
<div class="crayon-pre">
<div id="crayon-574606f6151a5204408435-1" class="crayon-line"><span class="crayon-v">app</span><span class="crayon-sy">.</span><span class="crayon-e">post</span><span class="crayon-sy">(</span><span class="crayon-s">“/upload”</span><span class="crayon-sy">,</span> <span class="crayon-e">multer</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span><span class="crayon-v">dest</span><span class="crayon-o">:</span> <span class="crayon-s">“./uploads/”</span><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-t">array</span><span class="crayon-sy">(</span><span class="crayon-s">“uploads”</span><span class="crayon-sy">,</span> <span class="crayon-cn">12</span><span class="crayon-sy">)</span><span class="crayon-sy">,</span> <span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-v">req</span><span class="crayon-sy">,</span> <span class="crayon-v">res</span><span class="crayon-sy">)</span> <span class="crayon-sy">{</span></div>
<div id="crayon-574606f6151a5204408435-2" class="crayon-line crayon-striped-line"><span class="crayon-h">    </span><span class="crayon-t">var</span> <span class="crayon-v">fileInfo</span> <span class="crayon-o">=</span> <span class="crayon-sy">[</span><span class="crayon-sy">]</span><span class="crayon-sy">;</span></div>
<div id="crayon-574606f6151a5204408435-3" class="crayon-line"><span class="crayon-h">    </span><span class="crayon-st">for</span><span class="crayon-sy">(</span><span class="crayon-t">var</span> <span class="crayon-v">i</span> <span class="crayon-o">=</span> <span class="crayon-cn">0</span><span class="crayon-sy">;</span> <span class="crayon-v">i</span> <span class="crayon-o"><</span> <span class="crayon-v">req</span><span class="crayon-sy">.</span><span class="crayon-v">files</span><span class="crayon-sy">.</span><span class="crayon-v">length</span><span class="crayon-sy">;</span> <span class="crayon-v">i</span><span class="crayon-o">++</span><span class="crayon-sy">)</span> <span class="crayon-sy">{</span></div>
<div id="crayon-574606f6151a5204408435-4" class="crayon-line crayon-striped-line"><span class="crayon-h">        </span><span class="crayon-v">fileInfo</span><span class="crayon-sy">.</span><span class="crayon-e">push</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span></div>
<div id="crayon-574606f6151a5204408435-5" class="crayon-line"><span class="crayon-h">            </span><span class="crayon-s">“originalName”</span><span class="crayon-o">:</span> <span class="crayon-v">req</span><span class="crayon-sy">.</span><span class="crayon-v">files</span><span class="crayon-sy">[</span><span class="crayon-v">i</span><span class="crayon-sy">]</span><span class="crayon-sy">.</span><span class="crayon-v">originalName</span><span class="crayon-sy">,</span></div>
<div id="crayon-574606f6151a5204408435-6" class="crayon-line crayon-striped-line"><span class="crayon-h">            </span><span class="crayon-s">“size”</span><span class="crayon-o">:</span> <span class="crayon-v">req</span><span class="crayon-sy">.</span><span class="crayon-v">files</span><span class="crayon-sy">[</span><span class="crayon-v">i</span><span class="crayon-sy">]</span><span class="crayon-sy">.</span><span class="crayon-v">size</span><span class="crayon-sy">,</span></div>
<div id="crayon-574606f6151a5204408435-7" class="crayon-line"><span class="crayon-h">            </span><span class="crayon-s">“b64”</span><span class="crayon-o">:</span> <span class="crayon-r">new</span> <span class="crayon-e">Buffer</span><span class="crayon-sy">(</span><span class="crayon-v">fs</span><span class="crayon-sy">.</span><span class="crayon-e">readFileSync</span><span class="crayon-sy">(</span><span class="crayon-v">req</span><span class="crayon-sy">.</span><span class="crayon-v">files</span><span class="crayon-sy">[</span><span class="crayon-v">i</span><span class="crayon-sy">]</span><span class="crayon-sy">.</span><span class="crayon-v">path</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">toString</span><span class="crayon-sy">(</span><span class="crayon-s">“base64”</span><span class="crayon-sy">)</span></div>
<div id="crayon-574606f6151a5204408435-8" class="crayon-line crayon-striped-line"><span class="crayon-h">        </span><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div>
<div id="crayon-574606f6151a5204408435-9" class="crayon-line"><span class="crayon-h">        </span><span class="crayon-v">fs</span><span class="crayon-sy">.</span><span class="crayon-e">unlink</span><span class="crayon-sy">(</span><span class="crayon-v">req</span><span class="crayon-sy">.</span><span class="crayon-v">files</span><span class="crayon-sy">[</span><span class="crayon-v">i</span><span class="crayon-sy">]</span><span class="crayon-sy">.</span><span class="crayon-v">path</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div>
<div id="crayon-574606f6151a5204408435-10" class="crayon-line crayon-striped-line"><span class="crayon-h">    </span><span class="crayon-sy">}</span></div>
<div id="crayon-574606f6151a5204408435-11" class="crayon-line"><span class="crayon-h">    </span><span class="crayon-v">res</span><span class="crayon-sy">.</span><span class="crayon-e">send</span><span class="crayon-sy">(</span><span class="crayon-v">fileInfo</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div>
<div id="crayon-574606f6151a5204408435-12" class="crayon-line crayon-striped-line"><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<p>This snippet will replace the <code>/upload</code> endpoint in our <strong>app.js</strong> file.  The first thing we do is loop through the array of files that were provided.</p>
<p>We’re going to push our own modified file data to a new array that will eventually be returned.</p>
<p>The file data that we want to keep is the original file name, file size, and then the base64 string representing the file itself.  To get the base64 string we read the file synchronously from the file system, add it to a buffer and then convert it to a string.  You certainly could use an asynchronous method for reading from the file system, but I chose the synchronous method for simplicity.</p>
<p>After we push to our array we can delete the file from the file system.  We don’t need to do this in a synchronous fashion so instead of holding up our execution we just <code>unlink</code> the files asynchronously.</p>
<h3>Conclusion</h3>
<p>We saw how to upload files to a Node.js server that uses the <a href="http://bit.ly/1sQrMlF" target="_blank">Multer</a> middleware.  <a href="http://bit.ly/1qK4jQZ" target="_blank">Previously</a> we only cared about leaving the file on the filesystem, but this time around we converted it to a base64 string.  This might be useful if you would rather everything be contained in your database.  It might also be useful if you have a mobile application with sync.</p>
<p>Keep in mind, I’d actually recommend leaving the files on your file system.  File system storage is cheap, its quick, and in my opinion better.</p>
<p> </p>
<div id="huge-it-share-buttons-top" class="huge-it-share-buttons nobackground">
<h3>Share This:</h3>
<ul class="huge-it-share-buttons-list">
<li class=" nobackground"><a href="http://bit.ly/1XReO0c" id="backforunical733" name="backforunical733" onclick="javascript:void window.open('http://bit.ly/1XReO0c','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -0px -120px" target="_blank"></a></li>
<li class=" nobackground"><a href="https://twitter.com/share?status=http://yoursmart.mobi/feed&text=Convert%20An%20Uploaded%20Image%20To%20A%20Base64%20String%20In%20Node.js" id="backforunical733" name="backforunical733" onclick="javascript:void window.open('https://twitter.com/share?status=http://yoursmart.mobi/feed&text=Convert An Uploaded Image To A Base64 String In Node.js','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -30px -120px" target="_blank"></a></li>
<li class=" nobackground"><a href="http://bit.ly/1qK4nQP%20An%20Uploaded%20Image%20To%20A%20Base64%20String%20In%20Node.js" id="backforunical733" name="backforunical733" onclick="javascript:void window.open('http://bit.ly/1qK4nQP An Uploaded Image To A Base64 String In Node.js','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -60px -120px" target="_blank"></a></li>
<li class=" nobackground"><a href="http://bit.ly/1XReO0d" id="backforunical733" name="backforunical733" onclick="javascript:void window.open('http://bit.ly/1XReO0d','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -90px -120px" target="_blank"></a></li>
<li class=" nobackground"><a href="http://bit.ly/1sQs1ND%20An%20Uploaded%20Image%20To%20A%20Base64%20String%20In%20Node.js&mini=true&url=http://bit.ly/1XReO0g" id="backforunical733" name="backforunical733" onclick="javascript:void window.open('http://bit.ly/1sQs1ND An Uploaded Image To A Base64 String In Node.js&mini=true&url=http://bit.ly/1XReO0g','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -120px -120px" target="_blank"></a></li>
<li class=" nobackground"><a href="http://bit.ly/1qK4kVc%20An%20Uploaded%20Image%20To%20A%20Base64%20String%20In%20Node.js" id="backforunical733" name="backforunical733" onclick="javascript:void window.open('http://bit.ly/1qK4kVc An Uploaded Image To A Base64 String In Node.js','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -150px -120px" target="_blank"></a></li>
<li class=" nobackground"><a href="http://di.gg/1sQrpHU%20An%20Uploaded%20Image%20To%20A%20Base64%20String%20In%20Node.js" id="backforunical733" name="backforunical733" onclick="javascript:void window.open('http://di.gg/1sQrpHU An Uploaded Image To A Base64 String In Node.js','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -180px -120px" target="_blank"></a></li>
<li class=" nobackground"><a href="http://stumble.it/1qK4tb7%20An%20Uploaded%20Image%20To%20A%20Base64%20String%20In%20Node.js" id="backforunical733" name="backforunical733" onclick="javascript:void window.open('http://stumble.it/1qK4tb7 An Uploaded Image To A Base64 String In Node.js','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -210px -120px" target="_blank"></a></li>
<li class=" nobackground"><a href="http://bit.ly/1XReO0l" id="backforunical733" name="backforunical733" onclick="javascript:void window.open('http://bit.ly/1XReO0l','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -240px -120px" target="_blank"></a></li>
<li class="none nobackground"><a href="http://bit.ly/1sQrsn2%20An%20Uploaded%20Image%20To%20A%20Base64%20String%20In%20Node.js" id="backforunical733" name="backforunical733" onclick="javascript:void window.open('http://bit.ly/1sQrsn2 An Uploaded Image To A Base64 String In Node.js','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -270px -120px" target="_blank"></a></li>
<li class="none nobackground"><a href="http://bit.ly/1qK4jAE%20An%20Uploaded%20Image%20To%20A%20Base64%20String%20In%20Node.js" id="backforunical733" name="backforunical733" onclick="javascript:void window.open('http://bit.ly/1qK4jAE An Uploaded Image To A Base64 String In Node.js','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -300px -120px" target="_blank"></a></li>
<li class="none nobackground"><a href="http://bit.ly/1VNpzTU" id="backforunical733" name="backforunical733" onclick="javascript:void window.open('http://bit.ly/1VNpzTU','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -330px -120px" target="_blank"></a></li>
<li class="none nobackground"><a href="http://bit.ly/1sQrACN%20An%20Uploaded%20Image%20To%20A%20Base64%20String%20In%20Node.js" id="backforunical733" name="backforunical733" onclick="javascript:void window.open('http://bit.ly/1sQrACN An Uploaded Image To A Base64 String In Node.js','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -360px -120px" target="_blank"></a></li>
<li class="none nobackground"><a href="http://bit.ly/1VNpzTX" id="backforunical733" name="backforunical733" onclick="javascript:void window.open('http://bit.ly/1VNpzTX','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -390px -120px" target="_blank"></a></li>
<li class="none nobackground"><a href="http://bit.ly/1qK4rjE%20An%20Uploaded%20Image%20To%20A%20Base64%20String%20In%20Node.js" id="backforunical733" name="backforunical733" onclick="javascript:void window.open('http://bit.ly/1qK4rjE An Uploaded Image To A Base64 String In Node.js','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -420px -120px" target="_blank"></a></li>
<li class="none nobackground"><a href="http://bit.ly/1sQrsU5%20An%20Uploaded%20Image%20To%20A%20Base64%20String%20In%20Node.js&pic=&ralateUid=&" id="backforunical733" name="backforunical733" onclick="javascript:void window.open('http://bit.ly/1sQrsU5 An Uploaded Image To A Base64 String In Node.js&pic=&ralateUid=&','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -450px -120px" target="_blank"></a></li>
<li class="none nobackground"><a href="http://bit.ly/1qK4Hz7%20An%20Uploaded%20Image%20To%20A%20Base64%20String%20In%20Node.js" id="backforunical733" name="backforunical733" onclick="javascript:void window.open('http://bit.ly/1qK4Hz7 An Uploaded Image To A Base64 String In Node.js','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -480px -120px" target="_blank"></a></li>
<li class="none nobackground"><a href="http://bit.ly/1sQrHyf%20An%20Uploaded%20Image%20To%20A%20Base64%20String%20In%20Node.js" id="backforunical733" name="backforunical733" onclick="javascript:void window.open('http://bit.ly/1sQrHyf An Uploaded Image To A Base64 String In Node.js','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -510px -120px" target="_blank"></a></li>
</ul>
<div class="clear"></div>
</div>
View more at: <a href="http://bit.ly/1XReQFr">http://bit.ly/1XReQFr</a>

Convert An Uploaded Image To A Base64 String In Node.js

Not too long ago I wrote about uploading files to a Node.js server that was making use of the Multer middleware. In that scenario the file...

Convert An Uploaded Image To A Base64 String In Node.js

Contact Form