Upload Javascript Object (svgCrowbar output) to Laravel 5.6 Server

user_9977241 0
Viewed 262

SVG Crowbar's code is here, I'm using it to download SVG's, but I want to be able to upload them to the server as well (with single click). I don't know javascript outside of D3.js, but I believe this is the object creation and download section of the code:

var url = window.URL.createObjectURL(new Blob(source.source, { "type" : "text\/xml" }));

var a = document.createElement("a");
body.appendChild(a);
a.setAttribute("class", "svg-crowbar");
a.setAttribute("download", filename + ".svg");
a.setAttribute("href", url);
a.style["display"] = "none";
a.click();

I use the following for Laravel file uploads, after retrieving them from a POST request:

{!! Form::file('file', array('class' => 'form-control')) !!}

Question: How would you upload an svg created with SVG Crowbar? (without making the user browse for the file to upload it after downloading it)

The fact it's an object, opposed to a file, and crossing language lines, confuses me.

Update

I have attempted this via ajax in a separate blade file, but I can't get it to work still. I see other questions about this and their fiddles can work in my browser but this does not work for me. I keep getting the error message from the ajax instead of its success message. All other errors are gone now. I click on Network in "inspect element" and everything is status 200, including the xhr.

I have also checked .env file and config/sessions making sure secure session cookie is set to false, my server time is fine, I can login fine, I can do normal Laravel file uploads and everything else fine. I deleted cookies from browser and logged in again and it's still giving ajax error instead of success.

For View:

@extends('layouts.app')        
@include('header') //just first html tag, linked scripts, navbar
        <head><meta name="csrf-token" content="{{ csrf_token() }}"></head>
    @csrf
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script  type="text/javascript">
    var value = 62;
    $.ajaxSetup({
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      }
    });
    var data = { value : 63 };
      $.ajax({
        type: 'POST',
        url: 'http://localhost/torphin/public/graphbuilder/upload',
        processData: false,
        contentType: false,
        cache: false,
        dataType: 'json',
        data: { value : 63 },
        success: function(data) {
          console.log('Value added ' + value);
        },
        error: function(e) {
          console.log('Error!', e);
        }
      });
    </script>
    @include('footer') //just footer, jquery, and bootstrap links

For Controller:

public function uploadGet(Request $request)
{   
    return view('svgUpload');
}
public function uploadGraph(Request $request)
{
    dd($request);
    session([ 'value' => $request->value]);
}

For Routes:

Route::get('/graphbuilder/upload', array('uses' => 'Controller@uploadGet'));
Route::post('/graphbuilder/upload', array('uses' => 'Controller@uploadGraph'));
laravel-5 d3.js javascript
1 Answers

So I looked inside of the error message that my ajax request is supposed to print, and after pasting it into google, found this SO question, stating that this:

public function uploadGraph(Request $request)
{
    dd($request);
    session([ 'value' => $request->value]);
}

should be changed this:

public function uploadGraph(Request $request)
{
    return $request->all();
}

It then passes the console log of the value "62" in the console. I should be able to pass the url value from SVG Crowbar and receive it in the page then. Thanks to anyone who took the time to read this.

user_99772410
Related